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
0
0
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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