Elastic Line Demo

1"use client"
2 
3import { motion, Variants } from "motion/react"
4 
5import ElasticLine from "@/components/fancy/physics/elastic-line"
6 
7export default function Preview() {
8  const textVariants = {
9    hidden: { opacity: 0, y: 10 },
10    visible: (i: number) => ({
11      opacity: 1,
12      y: 0,
13      transition: {
14        delay: i * 0.3,
15        type: "spring",
16        stiffness: 300,
17        damping: 30,
18      },
19    }),
20  }
21 
22  return (
23    <div className="w-dvw h-dvh flex flex-row items-center justify-center font-overused-grotesk overflow-hidden bg-white text-foreground dark:text-muted">
24      <div className="absolute left-0 top-0 w-full h-full px-6 sm:px-8 md:px-12 z-10">
25        {/* Animated elastic line */}
26        <ElasticLine
27          releaseThreshold={50}
28          strokeWidth={1}
29          animateInTransition={{
30            type: "spring",
31            stiffness: 300,
32            damping: 30,
33            delay: 0.15,
34          }}
35        />
36      </div>
37 
38      {/* This is just fluff for the demo */}
39      <div className="h-full flex flex-col py-6 w-full px-6 sm:px-8 md:px-12 font-light">
40        <div className="h-1/2 py-8 w-full items-end flex">
41          <motion.p
42            variants={textVariants as Variants}
43            initial="hidden"
44            animate="visible"
45            className="uppercase text-4xl sm:text-5xl md:text-6xl font-medium"
46            custom={0}
47          >
48            FANCY COMPONENTS
49          </motion.p>
50        </div>
51        <div className="flex flex-row  pt-8 justify-between items-start gap-x-4">
52          <motion.p
53            variants={textVariants as Variants}
54            initial="hidden"
55            animate="visible"
56            className="w-1/3 uppercase md:text-7xl hidden md:block text-orange-500"
57            custom={0}
58          >
59            ✽
60          </motion.p>
61          <motion.p
62            variants={textVariants as Variants}
63            initial="hidden"
64            animate="visible"
65            className="w-full md:w-2/3 sm:text-left text-base sm:text-xl md:text-2xl"
66            custom={1}
67          >
68            Ready to use, fancy, animated React components & microinteractions
69            for creative developers.
70          </motion.p>
71        </div>
72 
73        {/* <div className="h-1/3 flex items-center justify-end">
74          <motion.p
75            variants={textVariants}
76            initial="hidden"
77            animate="visible"
78            custom={2}
79          >
80            
81          </motion.p>
82// … truncated