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";
import { useCallback, useEffect, useRef, useState } from "react";
import { FadeIn } from "./fade-in";
import { TypingCursor } from "./typing-cursor";
const wordCloud = [
@@ -115,39 +114,31 @@ export function Hero() {
</div>
<div className="relative mx-auto max-w-4xl text-center">
<FadeIn>
<h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
Your images. Stay yours.
</h1>
</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">
Your images. Stay yours.
</h1>
<FadeIn delay={0.1}>
<p className="mt-4 text-lg text-muted md:text-xl">
The open-source, self-hosted image processing platform.
</p>
</FadeIn>
<p className="mt-4 animate-[fadeUp_0.6s_ease-out_0.1s_both] text-lg text-muted md:text-xl">
The open-source, self-hosted image processing platform.
</p>
<FadeIn delay={0.15}>
<p className="mt-4 text-xl font-medium md:text-2xl">
<TypingCursor />
</p>
</FadeIn>
<p className="mt-4 animate-[fadeUp_0.6s_ease-out_0.2s_both] text-xl font-medium md:text-2xl">
<TypingCursor />
</p>
<FadeIn delay={0.2}>
<div className="mt-10">
<a
href="https://github.com/ashim-hq/ashim"
target="_blank"
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"
>
Get it for free
<span className="transition-transform duration-300 group-hover:translate-x-1">
&rarr;
</span>
</a>
</div>
</FadeIn>
<div className="mt-10 animate-[fadeUp_0.6s_ease-out_0.3s_both]">
<a
href="https://github.com/ashim-hq/ashim"
target="_blank"
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"
>
Get it for free
<span className="transition-transform duration-300 group-hover:translate-x-1">
&rarr;
</span>
</a>
</div>
</div>
</section>
);
apps/landing/src/styles/globals.css
+11
View File
@@ -18,3 +18,14 @@
.tool-card:hover {
border-color: var(--cat-color);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}