A physics-based text animation component with Matter.js that makes text fall and interact with mouse movements
import FallingText from "@/components/foliokit/falling-text";export default function FallingTextDemo() { return ( <div className="flex min-h-[400px] w-full items-center justify-center"> <FallingText text="Welcome to FolioKit!" highlightWords={["FolioKit"]} trigger="auto" fontSize="2rem" enableShadows={true} shadowIntensity={0.7} /> </div> );}pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/falling-text.jsonnpx shadcn@latest add https://folio-kit.vercel.app/r/falling-text.jsonyarn shadcn@latest add https://folio-kit.vercel.app/r/falling-text.jsonbunx shadcn@latest add https://folio-kit.vercel.app/r/falling-text.jsonimport FallingText from "@/components/ui/falling-text";<FallingText
text="Hello World! This text will fall with physics"
highlightWords={["Hello", "physics"]}
trigger="auto"
/>import FallingText from "@/components/foliokit/falling-text";export default function FallingTextDemo() { return ( <div className="flex min-h-[400px] w-full items-center justify-center"> <FallingText text="Welcome to FolioKit!" highlightWords={["FolioKit"]} trigger="auto" fontSize="2rem" enableShadows={true} shadowIntensity={0.7} /> </div> );}###Highlighted Falling text
import FallingText from "@/components/foliokit/falling-text";export default function FallingTextHighlightDemo() { return ( <div className="flex min-h-[400px] w-full items-center justify-center"> <FallingText text="Create amazing effects with gradient highlights!" highlightWords={["amazing", "gradient", "highlights!"]} highlightClassName="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent font-bold" trigger="auto" fontSize="1.8rem" minHeight="250px" /> </div> );}###Physics Failling text
import FallingText from "@/components/foliokit/falling-text";export default function FallingTextPhysicsDemo() { return ( <div className="flex min-h-[400px] w-full items-center justify-center"> <FallingText text="Dead drop with no restitution" trigger="auto" fontSize="2rem" physicsOptions={{ restitution: 0, frictionAir: 0.02, friction: 0.5, }} minHeight="300px" /> </div> );}###Shadow text falling
import FallingText from "@/components/foliokit/falling-text";export default function FallingTextShadowsDemo() { return ( <div className="flex min-h-[400px] w-full items-center justify-center"> <FallingText text="Watch the light shadows fall beneath" trigger="auto" fontSize="2rem" enableShadows={true} shadowColor="rgba(255, 255, 255, 0.25)" shadowIntensity={0.6} minHeight="300px" /> </div> );}Prop
Type