InteractiveText

Text 1

About

The artistic fusion of SVG and particle systems

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds InteractiveText to your project and fits it to your theme.

Code

How InteractiveText is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { InteractiveParticleText } from "@/components/ui/interactive-text";

export default function DemoOne() {
    return (
        <div className="fixed inset-0 w-screen h-screen">
            <InteractiveParticleText
                svgPaths={[
                    "M13 32C13 20.9543 21.9543 12 33 12C44.0457 12 53 20.9543 53 32C53 43.0457 44.5 47.5 33 52H53C53 63.0457 44.0457 72 33 72C21.9543 72 13 63.0457 13 52C13 40.9543 22.5 34 33 32H13Z",
                    "M53 72C64.7324 67.0977 73 55.5117 73 42C73 28.4883 64.7324 16.9023 53 12V72Z"
                ]}
                svgViewBox="0 0 84 84"
                svgSize={300}
                particleCount={8000}
                maxDistance={180}
                scatteredColor="#00DCFF"
                enableColorChange={false}
                bottomText="Move your mouse to experience optimized particle physics"
                // bottomLink={{
                //     text: "Explore More",
                //     href: "#"
                // }}
            /> 
        </div>
    )
}