Great design lives in the details. Gravity Trail transforms the simple act of cursor movement into a playful, immersive performance. Instead of a static pointer, this component unleashes a stream of branded visuals that react to physics and momentum. It captures that award-winning "creative coding" feel—where the interface feels alive and tactile—without the headache of managing memory or animation loops.
Demo test here: https://gravitytrail.framer.website/
Creative portfolios and agency websites
Playful landing page interactions
Brand reinforcement (using logo marks as trails)
Holiday themes or celebratory digital events
High-retention "easter egg" moments
Set the Scene Drag the component onto your canvas. Since it operates as a global overlay, you can place it anywhere in your layer stack (ideally at the top) to ensure the trail floats above your content.• Tip: This component handles its own memory management, so you can safely use it on long pages without performance dips.
Choose Your Assets Select your Content Type from the properties panel. Toggle "Emoji" for instant, expressive vibes, or switch to "Image" to upload your own transparent PNGs (like logos or custom icons).• Creative Control: You can list multiple emojis (e.g., "✨, ⚡️, 🚀") or images, and the component will cycle through them automatically for variety.
Tune the Physics Adjust the feel of the gravity. Use the Spawn Distance slider to control density—lower values create a thick stream, higher values create elegant, spaced-out drops.• Final Touch: Tweak the Animation Duration to control how fast items fall. A slower duration feels like a feather floating; a faster one feels like a solid object dropping.
To give your trail a premium finish:
Open the Transform section in the properties.
Add a bit of Scale (e.g., start at 0.5) or Rotate to make items "pop" into existence before they fall.
This creates a dynamic "spawn" effect rather than items just appearing out of thin air.
Madrepunk™ Design Studio
