Star Warp
A mesmerizing 3D starfield warp effect for your Framer sites.
Overview
A mesmerizing 3D starfield warp effect for your Framer sites.
- Customizable star count
- Adjustable warp speed
- Star color control
- Canvas background color support
- Adjustable star size
- Control over vanish point (Center X/Y)
- Interactive mouse control
- Spiral rotation effect
- Atmospheric depth fade
- Canvas-optimized performance
Star Warp
Add a dynamic, sci-fi inspired starfield warp effect to your website. Perfect for hero sections, loading screens, or backgrounds that need a sense of motion and depth.
Features
Customizable Density Adjust the number of stars to create anything from a sparse void to a dense galaxy.
Speed Control Control the speed of the warp effect to match the energy of your site.
Themeable Warp speed ahead with custom colors for both the stars and the background canvas.
Use Cases
Hero Backgrounds — Create an immersive first impression.
Loading States — Keep users engaged while content loads.
Creative Portfolios — Show off a modern, tech-forward aesthetic.
How to Use
Installation
VIDEO PLACEHOLDER: Installation Tutorial
- Log in to your account at framerhub.io
- Navigate to framerhub.io/dashboard
- Find Star Warp in your Recent Purchases
- Click the "Copy" button
- Open your Framer project
- Paste the component anywhere on your canvas (Cmd/Ctrl + V)
Customization
You can customize the appearance and behavior of the Star Warp effect using the property controls in Framer.
Controls
- Stars: Set the number of stars (50-500).
- Warp: Adjust the speed of the stars (1-20).
- Star Color: Choose the color of the stars.
- Background: Set the background color of the canvas.
- Star Size: Adjust the maximum size of the stars.
- Center X / Y: Move the warp's vanishing point to create steering effects.
- Mouse Control: Enable this to make the warp center follow your mouse cursor.
- Rotation: Rotate the entire starfield for a vortex effect.
- Depth Fade: Smoothly fade distant stars to black for a realistic "fog" effect.
Quick Tips
Best Performance — Keep the star count moderate (around 200) for the best balance of visual impact and performance, especially on mobile devices.
Color Combinations — High contrast works best. Try bright stars on a dark background for a classic space look, or get creative with colored backgrounds.
Layering — Place text or other content on top of the starfield. Ensure your text has sufficient contrast against the background color.
License
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
Refund Policy
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
Why Designers Love This
It's a "plug-and-play" way to add a high-quality, coded animation to a site without needing to write any code yourself. The 3D depth effect is instantly engaging.
Star Warp - $9
A mesmerizing 3D starfield warp effect for your Framer sites.
You might also like
Why Choose Framer Hub Components
Loved by Framer teams
Used by Framer professionals who need premium, no-code experiences.
"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Got questions? We've the answers
Got questions? We've the answers
Everything you need to know about FramerHub.