Float Offset Demo

1import { cn } from "@/lib/utils"
2import Float from "@/components/fancy/blocks/float"
3 
4export default function FloatDemo() {
5  const texts = [
6    { text: "@mdx-js/loader", position: "top-[0%] left-[20%]" },
7    { text: "@mdx-js/react", position: "top-[20%] left-[80%]" },
8    { text: "@next/mdx", position: "top-[70%] left-[40%]" },
9    { text: "@vercel/analytics", position: "top-[80%] left-[30%]" },
10    { text: "class-variance-authority", position: "top-[40%] left-[0%]" },
11    { text: "clsx", position: "top-[15%] left-[45%]" },
12    { text: "flubber", position: "top-[65%] left-[85%]" },
13    { text: "motion", position: "top-[85%] left-[15%]" },
14    { text: "lenis", position: "top-[35%] left-[75%]" },
15    { text: "lodash", position: "top-[75%] left-[55%]" },
16    { text: "lucide-react", position: "top-[25%] left-[35%]" },
17    { text: "matter-js", position: "top-[45%] left-[25%]" },
18    { text: "mdast-util-toc", position: "top-[55%] left-[65%]" },
19    { text: "next", position: "top-[90%] left-[45%]" },
20    { text: "next-mdx-remote", position: "top-[10%] left-[70%]" },
21    { text: "poly-decomp", position: "top-[60%] left-[10%]" },
22    { text: "react", position: "top-[30%] left-[50%]" },
23    { text: "react-dom", position: "top-[95%] left-[60%]" },
24    { text: "react-syntax-highlighter", position: "top-[5%] left-[90%]" },
25    { text: "react-wrap-balancer", position: "top-[82%] left-[75%]" },
26    { text: "rehype-pretty-code", position: "top-[28%] left-[15%]" },
27    { text: "remark", position: "top-[67%] left-[5%]" },
28    { text: "svg-path-commander", position: "top-[92%] left-[25%]" },
29    { text: "tailwind-merge", position: "top-[28%] left-[95%]" },
30    { text: "tailwindcss-animate", position: "top-[73%] left-[20%]" },
31    { text: "zod", position: "top-[8%] left-[40%]" },
32  ]
33 
34  return (
35    <div className="w-dvw h-dvh flex flex-col items-center justify-center bg-white relative">
36      {texts.map((item, i) => (
37        <Float
38          key={i}
39          timeOffset={i * 0.8}
40          amplitude={[
41            15 + Math.random() * 20,
42            25 + Math.random() * 30,
43            20 + Math.random() * 25,
44          ]}
45          rotationRange={[
46            10 + Math.random() * 10,
47            10 + Math.random() * 10,
48            5 + Math.random() * 5,
49          ]}
50          speed={0.3 + Math.random() * 0.4}
51          className={cn(
52            "absolute text-lg flex sm:text-xl md:text-2xl font-light hover:underline cursor-pointer text-[#0015ff]",
53// … truncated