dionjoshualobo/ArtSplash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed the Jerks of the Marquee effect

Browse Source
This commit is contained in:
ShovinDsouza
2026-02-21 15:19:04 +05:30
parent 29fc82c104
commit 58394b4236
4 changed files with 258 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/components/Hero.tsx
View File

@@ -14,10 +14,12 @@ function TileGrid() {
const handleMouseEnter = useCallback((index: number) => {
const tile = tilesRef.current[index];
if (tile) {
gsap.killTweensOf(tile);
gsap.to(tile, {
rotateY: 180,
duration: 0.4,
ease: "power2.out",
duration: 0.5,
ease: "power2.inOut",
overwrite: true,
});
}
}, []);
@@ -25,10 +27,12 @@ function TileGrid() {
const handleMouseLeave = useCallback((index: number) => {
const tile = tilesRef.current[index];
if (tile) {
gsap.killTweensOf(tile);
gsap.to(tile, {
rotateY: 0,
duration: 0.4,
ease: "power2.out",
duration: 0.5,
ease: "power2.inOut",
overwrite: true,
});
}
}, []);
@@ -53,7 +57,10 @@ function TileGrid() {
<div
ref={(el) => { tilesRef.current[index] = el; }}
className="w-full h-full relative"
style={{ transformStyle: "preserve-3d" }}
style={{
transformStyle: "preserve-3d",
willChange: "transform",
}}
>
{/* Front - Black */}
<div
@@ -133,12 +140,12 @@ export default function Hero() {
</h1>
<div ref={contentRef}>
<p className="text-zinc-400 text-base sm:text-lg max-w-lg mx-auto mb-10 leading-relaxed font-light">
<p className="text-zinc-300 text-base sm:text-lg max-w-lg mx-auto mb-10 leading-relaxed font-light drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
From canvas to screen, showcase your creativity and let your
artwork speak to the world.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center pointer-events-auto">
<div className="flex flex-col sm:flex-row gap-4 justify-center pointer-events-auto mb-12">
<Link
href="/register"
className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-10 py-4 text-sm font-bold tracking-wider hover:bg-lime-300 transition-all hover:scale-105 rounded-full shadow-[0_0_30px_rgba(163,230,53,0.3)]"
@@ -152,15 +159,15 @@ export default function Hero() {
EXPLORE GALLERY
</Link>
</div>
{/* Scroll Indicator */}
<div className="flex flex-col items-center gap-2">
<span className="text-lime-400 text-[10px] tracking-[0.3em] uppercase drop-shadow-[0_0_10px_rgba(163,230,53,0.8)]">Scroll</span>
<div className="w-px h-8 bg-gradient-to-b from-lime-400 to-transparent shadow-[0_0_10px_rgba(163,230,53,0.5)]" />
</div>
</div>
</div>
</div>
{/* Scroll Indicator - positioned above the marquee */}
<div className="absolute bottom-28 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-zinc-500 z-10">
<span className="text-[10px] tracking-[0.3em] uppercase">Scroll</span>
<div className="w-px h-8 bg-gradient-to-b from-zinc-500 to-transparent" />
</div>
</div>
{/* Bottom Marquee */}