simple stagger paragraphs enter animation

Use simple CSS keyframe animation with CSS variable to create a staggered entering animation for paragraphs. Added subtle blur animation to make it look more natural. This simple yet elegant transition is inspired by Paco Coursey's portfolio site: https://paco.me/.

keyframesanimation-delayanimation-fill-mode
import "./styles.css";

const PARAGRAPHS: string[] = [
`Welcome to Craft, a live playground where ideas transform into interactive experiences. This is where creativity meets code in real-time experimentation.`,
`Craft provides a sandbox environment for developers to test animations, interactions, and design concepts without the overhead of setting up a complete project. Each station in Craft represents a focused exploration of a specific technique.`,
`This particular station demonstrates staggered paragraph animations - a subtle yet effective way to guide the user's attention through content. Notice how each paragraph enters the viewport with a slight delay after the previous one.`,
`The beauty of Craft lies in its simplicity. You can examine the code, understand the implementation, and immediately see the results. It's designed to inspire and educate through practical examples.`,
];

export default function App() {
return (
<main className="flex h-screen w-screen justify-center overflow-y-auto p-8">
<div
className="flex max-w-md flex-col gap-y-6"
style={{
"--delay": "120ms",
}}
>
<h3>Craft</h3>
{PARAGRAPHS.map((text, idx) => (
<p
key={text}
style={{
"--index": idx,
}}
>
{text}
</p>
))}
</div>
</main>
);
}

0
0
© CC BY-NC-SA 4.0 2024-2025 Li Yuxuan