"use client" import { useState } from "react" import { Minus, Plus } from "lucide-react" import { toast } from "sonner" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { AnimatedNumber } from "@/components/ui/animated-number" import { GradientHeading } from "@/components/ui/gradient-heading" import { TextureCardContent, TextureCardHeader, TextureCardStyled, } from "@/components/ui/texture-card" function PrecisionExample() { const [value, setValue] = useState(14.5678) return ( Precision

) } function FormatExample() { const [value, setValue] = useState(10) const customFormat = (num: number) => `$${num.toFixed(2)}` return ( Format

) } function HooksExample() { const [value, setValue] = useState(10) const handleAnimationStart = () => { toast("🏁 Animation started ") } const handleAnimationComplete = () => { toast("✅ Animation completed ") } return ( Callbacks

) } function CustomSpringExample() { const [value, setValue] = useState(1000) const [mass, setMass] = useState(1) const [stiffness, setStiffness] = useState(100) const [damping, setDamping] = useState(40) const handleValueChange = (setter: (value: number) => void, minValue: number) => (values: number[]) => { const newValue = Math.max(values[0], minValue) setter(newValue) } return ( Custom Spring Properties

Mass: {mass}

Stiffness: {stiffness}

Damping: {damping}

) } export function AnimatedNumberExamples() { return (

) }

animated-number

Image Gallery