Transform Framer Projects with 'Starry Night' Animated BackgroundTransform Framer Projects with 'Starry Night' Animated Background
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Aysegul's avatar
Aysegul Karadan
• 1d
The Starry Night — Interactive Animated Background for Framer
The Industry-Standard Interactive Animated Background Engine.
Stop settling for static gradients and looping stock videos. Starry Night Living Canvas is a high-performance, cursor-reactive immersive background built for creative agencies, luxury portfolios, art galleries, and premium Framer sites.
LIVE DEMO
Elevate Your Hero Section
Whether you are launching a creative portfolio, a cultural brand, or a high-end product page, Starry Night delivers the visual depth and tactile feedback that separates elite websites from the rest. Not a wallpaper. Not a video. A living painting.
Core Mechanics
Painterly brush engine — Thousands of flowing strokes sampled from Van Gogh’s Starry Night palette. The sky breathes with continuous, organic spiral and swirl motion.
Cursor-reactive physics — Your visitor’s mouse pushes and scatters brush strokes in real time. The canvas feels alive, not decorative.
3D cypress tree overlay — A swaying foreground tree rendered in WebGL adds cinematic depth and parallax without leaving your Framer page.
Cinematic cursor lens — Optional glass lens + ring follow the cursor for a premium, editorial interaction layer.
Framer-native controls — Drag, drop, and tune stroke width, glow, path speed, swirl speed, mouse radius, push force, lens size, and more — no code required.
📦 What's in the Box?
✅ Framer Code Component — StarryNightBackground.tsx with 12 property controls
✅ Quick start — Paste into Assets → Code, place full-screen, publish in minutes
✅ License — Use on unlimited Framer projects (personal & commercial)
Technical Specs
Platform: Framer (Code Component)
Delivery: Single .tsx file — paste into Assets → Code
Hosting: None required — runs entirely in Framer
Interaction: Mouse-reactive brush repulsion
3D layer: WebGL cypress tree with wind sway (dual-layer silhouette)
Performance: Adaptive particle budget, dual-canvas rendering, lazy scene load
Modes: Opaque & transparent background for layering over any layout
Dependencies: Framer built-ins only (framer, framer-motion) Customization: 12 Framer panel controls
Perfect For
Creative & design agency portfolios
Art galleries & cultural institutions
Luxury / fashion landing pages
Immersive hero sections that need to feel unforgettable
Framer creators who want a living background, not another static block
How It Works
Copy the Code Component into Framer (Assets → Code).
Place the component full-screen at the back of your page.
Add your text, buttons, and content on top.
Tune motion and interaction from the Framer properties panel.
Publish.
The background runs as a full-screen layer. Your Framer content stays in front. Your site becomes the frame; Starry Night becomes the art.
WonderCoder — Interactive experiences for designers who refuse to settle for static.
3D Design3D AnimationFrontend DevelopmentFramerthree.jsWebGL
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started