About
Cursor Trail Badges is a high-performance interactive physics component that generates dynamic, floating typography badges behind cursor and touch movements. Smooth inertia, customizable badge shapes, kinetic entrance animations, and text-scramble effects give landing pages and interactive portfolios a sleek, playful, and modern digital aesthetic.
What it does
Physics-Driven Motion Engine: Spawns reactive text badges with customizable follow speed, momentum, drift, spread, and gravity.
Interactive Spawn Patterns: Supports 6 distinct spawning styles including Trail, Burst, Spiral, Orbit, Wave, and Random.
Smart Idle Ghost Mode: Automatically generates gentle background trails when the cursor stays still, keeping your site lively and engaging.
Kinetic FX & Scramble Animations: Features 9 entrance styles (Flip, Pop, Bounce, Elastic, Zoom, and more) along with matrix-style text scramble effects for rare special badges.
Performance Optimized: Built with RAF batching, DOM node recycling, automatic offscreen pausing via IntersectionObserver, and static preview rendering for Framer Canvas and SSG exports.
What you can customize
Everything is fully configurable directly from Framer’s right-hand property panel:
Text Collections & Custom Words: Choose from built-in collections (Typography, Design, AI, Development) or input your own custom word arrays.
Themes & Color Engines: Pick from 15 pre-built design presets or customize color engines using Rainbow, Cyberpunk, Sunset, Neon, Pastel, or your own brand palettes.
Badge Styling & Typography: Control font family, font weight, font size, padding, border radius, blend modes, and badge shapes (Pill, Rounded, Square, Circle).
Physics & Timing Controls: Fine-tune badge lifespan, spawn rates, travel distance, motion curves, appear duration, hold duration, and fade speeds.
Need help?
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
About
Cursor Trail Badges is a high-performance interactive physics component that generates dynamic, floating typography badges behind cursor and touch movements. Smooth inertia, customizable badge shapes, kinetic entrance animations, and text-scramble effects give landing pages and interactive portfolios a sleek, playful, and modern digital aesthetic.
What it does
Physics-Driven Motion Engine: Spawns reactive text badges with customizable follow speed, momentum, drift, spread, and gravity.
Interactive Spawn Patterns: Supports 6 distinct spawning styles including Trail, Burst, Spiral, Orbit, Wave, and Random.
Smart Idle Ghost Mode: Automatically generates gentle background trails when the cursor stays still, keeping your site lively and engaging.
Kinetic FX & Scramble Animations: Features 9 entrance styles (Flip, Pop, Bounce, Elastic, Zoom, and more) along with matrix-style text scramble effects for rare special badges.
Performance Optimized: Built with RAF batching, DOM node recycling, automatic offscreen pausing via IntersectionObserver, and static preview rendering for Framer Canvas and SSG exports.
What you can customize
Everything is fully configurable directly from Framer’s right-hand property panel:
Text Collections & Custom Words: Choose from built-in collections (Typography, Design, AI, Development) or input your own custom word arrays.
Themes & Color Engines: Pick from 15 pre-built design presets or customize color engines using Rainbow, Cyberpunk, Sunset, Neon, Pastel, or your own brand palettes.
Badge Styling & Typography: Control font family, font weight, font size, padding, border radius, blend modes, and badge shapes (Pill, Rounded, Square, Circle).
Physics & Timing Controls: Fine-tune badge lifespan, spawn rates, travel distance, motion curves, appear duration, hold duration, and fade speeds.
Need help?
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
