Scroll Animation Trigger Demo

1import { ScrollAnimationTrigger } from "../ui/scroll-animation-trigger";
2import {
3  ArrowDown,
4  Sparkles,
5  Zap,
6  Layers,
7  ExternalLink,
8  Wand2,
9} from "lucide-react";
10import { ScrollArea } from "../../components/ui/scroll-area";
11 
12export function ScrollAnimationTriggerDemo() {
13  return (
14    <div className="w-full overflow-hidden flex flex-col">
15      <ScrollArea className="h-[80vh]">
16        <div className="relative flex flex-col items-center pt-60 justify-center text-center px-4 sm:px-6 lg:px-8 py-6 overflow-hidden">
17          <div className="absolute inset-0 overflow-hidden">
18            {[...Array(10)].map((_, i) => (
19              <div
20                key={i}
21                className="absolute rounded-full opacity-20"
22                style={{
23                  background: i % 2 === 0 ? "#9206cf" : "#ec4899",
24                  width: `${Math.random() * 5 + 2}vw`,
25                  height: `${Math.random() * 5 + 2}vw`,
26                  left: `${Math.random() * 100}%`,
27                  top: `${Math.random() * 100}%`,
28                }}
29              />
30            ))}
31          </div>
32 
33          <ScrollAnimationTrigger
34            effect="slide"
35            direction="up"
36            className="flex flex-col items-center justify-center w-full max-w-3xl mx-auto"
37          >
38            <h1 className="text-3xl sm:text-4xl pb-3 md:text-5xl lg:text-6xl font-extrabold mb-4 z-10 px-2">
39              Scroll Down Here
40            </h1>
41 
42            <p className="text-gray-600 z-10 dark:text-gray-300 mb-6 font-semibold max-w-md text-base sm:text-lg md:text-xl px-4 w-full">
43              Scroll down to see the ScrollAnimationTrigger in action
44            </p>
45 
46            <div className="mt-2 p-3 rounded-full bg-purple-500 shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
47              <ArrowDown className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
48            </div>
49          </ScrollAnimationTrigger>
50        </div>
51 
52        <div className="relative h-12 overflow-hidden">
53          <svg
54            className="absolute bottom-0 w-full h-12 text-white dark:text-gray-900"
55            viewBox="0 0 1200 120"
56            preserveAspectRatio="none"
57          >
58            <path
59              d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
60              className="fill-current"
61            ></path>
62// … truncated