External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace framer-motion FadeIn with CSS keyframe animations in hero to fix rendering issue

Browse Source
This commit is contained in:
ashim-hq
2026-04-24 00:31:13 +08:00
parent 99c64f7471
commit 9d751e72f3
2 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/components/hero.tsx
+22 -31
View File
@@ -1,7 +1,6 @@
"use client"; "use client";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { FadeIn } from "./fade-in";
import { TypingCursor } from "./typing-cursor"; import { TypingCursor } from "./typing-cursor";
const wordCloud = [ const wordCloud = [
@@ -115,39 +114,31 @@ export function Hero() {
</div> </div>
<div className="relative mx-auto max-w-4xl text-center"> <div className="relative mx-auto max-w-4xl text-center">
<FadeIn> <h1 className="animate-[fadeUp_0.6s_ease-out_both] text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
<h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl"> Your images. Stay yours.
Your images. Stay yours. </h1>
</h1>
</FadeIn>
<FadeIn delay={0.1}> <p className="mt-4 animate-[fadeUp_0.6s_ease-out_0.1s_both] text-lg text-muted md:text-xl">
<p className="mt-4 text-lg text-muted md:text-xl"> The open-source, self-hosted image processing platform.
The open-source, self-hosted image processing platform. </p>
</p>
</FadeIn>
<FadeIn delay={0.15}> <p className="mt-4 animate-[fadeUp_0.6s_ease-out_0.2s_both] text-xl font-medium md:text-2xl">
<p className="mt-4 text-xl font-medium md:text-2xl"> <TypingCursor />
<TypingCursor /> </p>
</p>
</FadeIn>
<FadeIn delay={0.2}> <div className="mt-10 animate-[fadeUp_0.6s_ease-out_0.3s_both]">
<div className="mt-10"> <a
<a href="https://github.com/ashim-hq/ashim"
href="https://github.com/ashim-hq/ashim" target="_blank"
target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full bg-gradient-to-r from-amber-500 via-orange-500 to-amber-500 bg-[length:200%_100%] px-10 py-4 text-base font-semibold text-white shadow-[0_0_32px_-8px] shadow-amber-500/40 transition-all duration-500 hover:bg-[position:100%_0] hover:shadow-[0_0_40px_-4px] hover:shadow-amber-500/50"
className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full bg-gradient-to-r from-amber-500 via-orange-500 to-amber-500 bg-[length:200%_100%] px-10 py-4 text-base font-semibold text-white shadow-[0_0_32px_-8px] shadow-amber-500/40 transition-all duration-500 hover:bg-[position:100%_0] hover:shadow-[0_0_40px_-4px] hover:shadow-amber-500/50" >
> Get it for free
Get it for free <span className="transition-transform duration-300 group-hover:translate-x-1">
<span className="transition-transform duration-300 group-hover:translate-x-1"> &rarr;
&rarr; </span>
</span> </a>
</a> </div>
</div>
</FadeIn>
</div> </div>
</section> </section>
); );
apps/landing/src/styles/globals.css
+11
View File
@@ -18,3 +18,14 @@
.tool-card:hover { .tool-card:hover {
border-color: var(--cat-color); border-color: var(--cat-color);
} }
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}