3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove hover scale effects and optimize mobile UI transitions

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-27 11:42:54 +01:00
parent 5a1d0e3849
commit d17d360d0e
5 changed files with 106 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+1 -1
View File
@@ -115,7 +115,7 @@ export default function Home() {
</div> </div>
<div className="relative"> <div className="relative">
<div className="bg-white w-80 aspect-3/4 p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300 hover:scale-[1.02]"> <div className="bg-white w-80 aspect-3/4 p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300">
<div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative"> <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
{/* Page transition container */} {/* Page transition container */}
<div className="relative w-full h-full"> <div className="relative w-full h-full">
app/stories/page.tsx
+19 -24
View File
@@ -101,17 +101,18 @@ export default function StoriesPage() {
<div className="inline-flex items-center justify-center w-40 h-52 glass-panel border-2 border-dashed border-border rounded-lg hover:border-indigo/30 hover:shadow-indigo/10 hover:shadow-lg transition-all duration-300 group"> <div className="inline-flex items-center justify-center w-40 h-52 glass-panel border-2 border-dashed border-border rounded-lg hover:border-indigo/30 hover:shadow-indigo/10 hover:shadow-lg transition-all duration-300 group">
<Plus className="w-20 h-20 text-muted-foreground/50 group-hover:text-indigo/40 transition-colors duration-300" /> <Plus className="w-20 h-20 text-muted-foreground/50 group-hover:text-indigo/40 transition-colors duration-300" />
</div> </div>
<div className="absolute -inset-1 bg-gradient-to-r from-indigo/20 to-emerald/20 rounded-lg blur opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10" /> <div className="absolute -inset-1 bg-linear-to-r from-indigo/20 to-emerald/20 rounded-lg blur opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10" />
</div> </div>
<h2 className="text-4xl font-heading font-semibold mb-4 text-foreground tracking-tight"> <h2 className="text-4xl font-heading font-semibold mb-4 text-foreground tracking-tight">
Your Comic Library Awaits Your Comic Library Awaits
</h2> </h2>
<p className="text-muted-foreground mb-10 max-w-lg mx-auto leading-relaxed text-lg"> <p className="text-muted-foreground mb-10 max-w-lg mx-auto leading-relaxed text-lg">
Start crafting your first visual story. Every great comic begins with a single panel. Start crafting your first visual story. Every great comic
begins with a single panel.
</p> </p>
<Button <Button
onClick={() => router.push('/')} onClick={() => router.push("/")}
className="glass-panel glass-panel-hover px-8 py-4 text-base font-medium hover:scale-105 transition-all duration-300 hover:shadow-indigo/20 hover:shadow-lg" className="glass-panel glass-panel-hover px-8 py-4 text-base font-medium transition-all duration-300 hover:shadow-indigo/20 hover:shadow-lg"
> >
<Plus className="w-5 h-5 mr-3" /> <Plus className="w-5 h-5 mr-3" />
Create Your First Comic Create Your First Comic
@@ -124,7 +125,8 @@ export default function StoriesPage() {
Your Comic Library Your Comic Library
</h1> </h1>
<p className="text-muted-foreground text-base sm:text-lg max-w-3xl leading-relaxed"> <p className="text-muted-foreground text-base sm:text-lg max-w-3xl leading-relaxed">
Browse and continue your comic creations. Each story is a unique visual narrative waiting to unfold. Browse and continue your comic creations. Each story is a
unique visual narrative waiting to unfold.
</p> </p>
</div> </div>
@@ -133,34 +135,25 @@ export default function StoriesPage() {
<button <button
key={story.id} key={story.id}
onClick={() => router.push(`/story/${story.slug}`)} onClick={() => router.push(`/story/${story.slug}`)}
className={`opacity-0 animate-fade-in-up group relative glass-panel p-3 rounded-lg hover:shadow-indigo/20 hover:shadow-2xl transition-all duration-500 hover:scale-[1.05] hover:-translate-y-2 border border-border/50 hover:border-indigo/30 hover:bg-white/[0.02] backdrop-blur-sm focus:outline-none`} className={`opacity-0 animate-fade-in-up group relative glass-panel p-3 rounded-lg hover:shadow-indigo/20 hover:shadow-2xl transition-all duration-500 border border-border/50 backdrop-blur-sm focus:outline-none`}
style={{ animationDelay: `${200 + index * 100}ms` }} style={{ animationDelay: `${200 + index * 100}ms` }}
> >
<div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative group-hover:border-indigo/30 transition-colors duration-300"> <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative transition-colors duration-300">
{story.coverImage ? ( {story.coverImage ? (
<> <>
<img <img
src={story.coverImage} src={story.coverImage}
alt={story.title} alt={story.title}
className="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:brightness-110 opacity-90" className="w-full h-full object-cover transition-all duration-500 group-hover:brightness-110 opacity-90"
/> />
{story.pageCount > 1 && ( <div className="absolute inset-0 bg-linear-to-t from-black/95 via-black/30 to-transparent group-hover:from-black/90 transition-all duration-300" />
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-0 left-0 right-0 bottom-0 translate-x-1 translate-y-1 bg-black/20 group-hover:bg-indigo/10 transition-colors duration-300" />
{story.pageCount > 2 && (
<div className="absolute top-0 left-0 right-0 bottom-0 translate-x-2 translate-y-2 bg-black/10 group-hover:bg-indigo/5 transition-colors duration-300" />
)}
</div>
)}
<div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/30 to-transparent group-hover:from-black/90 transition-all duration-300" />
{/* Subtle glow effect on hover */}
<div className="absolute inset-0 opacity-0 group-hover:opacity-20 bg-gradient-to-r from-indigo/20 via-transparent to-emerald/20 transition-opacity duration-500" />
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/80 text-white text-[9px] font-mono uppercase tracking-widest border border-white/20 group-hover:bg-indigo/80 group-hover:border-indigo/40 transition-colors duration-300"> <div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/80 text-white text-[9px] font-mono uppercase tracking-widest border border-white/20 group-hover:bg-indigo/80 group-hover:border-indigo/40 transition-colors duration-300">
{COMIC_STYLES.find(s => s.id === story.style)?.name.toUpperCase() || story.style.toUpperCase()} {COMIC_STYLES.find(
(s) => s.id === story.style
)?.name.toUpperCase() ||
story.style.toUpperCase()}
</div> </div>
<div className="absolute bottom-0 left-0 right-0 p-3 text-left"> <div className="absolute bottom-0 left-0 right-0 p-3 text-left">
@@ -173,10 +166,12 @@ export default function StoriesPage() {
</div> </div>
</> </>
) : ( ) : (
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900"> <div className="w-full h-full flex items-center justify-center bg-linear-to-br from-neutral-800 to-neutral-900">
<div className="text-center"> <div className="text-center">
<Loader2 className="w-8 h-8 animate-spin text-indigo/60 mx-auto mb-3" /> <Loader2 className="w-8 h-8 animate-spin text-indigo/60 mx-auto mb-3" />
<p className="text-xs text-white/70 font-mono uppercase tracking-wider">Generating...</p> <p className="text-xs text-white/70 font-mono uppercase tracking-wider">
Generating...
</p>
</div> </div>
</div> </div>
)} )}
components/editor/comic-canvas.tsx
+15 -2
View File
@@ -82,7 +82,7 @@ export function ComicCanvas({
</div> </div>
{/* Action buttons below the page image */} {/* Action buttons below the page image */}
<div className="flex items-center justify-center gap-2 mt-4"> <div className="hidden md:flex items-center justify-center gap-2 mt-4">
{onInfoClick && ( {onInfoClick && (
<Button <Button
variant="ghost" variant="ghost"
@@ -123,10 +123,23 @@ export function ComicCanvas({
</div> </div>
<div className="flex flex-col items-center gap-3 mt-4"> <div className="flex flex-col items-center gap-3 mt-4">
{/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */} <div className="text-xs text-muted-foreground md:hidden">
Page {pageIndex + 1} of {totalPages}
</div>
{/* Mobile action buttons */} {/* Mobile action buttons */}
<div className="flex items-center gap-2 md:hidden"> <div className="flex items-center gap-2 md:hidden">
{onInfoClick && (
<Button
variant="ghost"
size="icon"
className="hover:bg-secondary text-muted-foreground hover:text-white h-9 w-9"
onClick={onInfoClick}
>
<Info className="w-4 h-4" />
</Button>
)}
{isOwner && ( {isOwner && (
<Button <Button
variant="ghost" variant="ghost"
components/editor/page-sidebar.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ export function PageSidebar({
isOwner = true, isOwner = true,
}: PageSidebarProps) { }: PageSidebarProps) {
return ( return (
<aside className="w-20 md:w-24 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between"> <aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between">
{/* Top section: page thumbnails */} {/* Top section: page thumbnails */}
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
{pages.map((page, index) => ( {pages.map((page, index) => (
@@ -84,7 +84,7 @@ export function PageSidebar({
onClick={onAddPage} onClick={onAddPage}
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center" className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
> >
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" /> <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
</button> </button>
)} )}
</div> </div>
components/ui/story-loader.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export function StoryLoader({ text = "Loading story..." }: StoryLoaderProps) {
key={currentSvgIndex} // Force re-render for smooth transition key={currentSvgIndex} // Force re-render for smooth transition
src={`/loader/${loaderSvgs[currentSvgIndex]}`} src={`/loader/${loaderSvgs[currentSvgIndex]}`}
alt="Loading..." alt="Loading..."
className="w-full h-full object-contain animate-pulse transition-all duration-700 ease-in-out transform scale-90 hover:scale-110" className="w-full h-full object-contain animate-pulse transition-all duration-700 ease-in-out transform"
style={{ filter: 'invert(1)' }} style={{ filter: 'invert(1)' }}
/> />
</div> </div>