HalfTone Ambient Background by Sanna GranqvistHalfTone Ambient Background | Contra
Six metaballs drift across a WebGL canvas, blending into a 3-stop color gradient that gets dot-printed in real time. Bright zones produce fat, dense dots. Dark zones shrink to near-nothing. A sine wave pulses through the whole grid, so the thing never quite sits still.
The halftone effect runs at the shader level — each dot's size is calculated from the luminance underneath it, per frame. The metaballs have domain warp applied, so they can hold tight circular shapes or stretch into something more organic depending on your setting. A vignette pulls the edges back. Mouse hover either pulls the field toward the cursor or pushes it away.
Five presets cover the obvious palettes (Ocean, Sunset, Neon, Forest, Mono), but all three gradient stops are exposed as custom color controls if you'd rather start from scratch.
What's controllable:
Color preset or custom 3-stop gradient
Dot shape: circle, square, diamond, or hollow ring
Domain warp — how round or amoeba-like the metaballs read
Wave ripple — how much the dots breathe over time
Mouse interaction — attract or repel
Quality: full retina or half-res for lower-end devices
No dependencies. Drop it on a section, adjust the props panel, done.
Get it for$12.00
Tags
Framer
Framer component
Product created by
Sanna Granqvist proGothenburg, Sweden
$1k+
Earned
2
Paid projects
5.00
Rating
142
Followers
Sanna's other products
Framer Component: Curved Text Ticker Pro
$12.00
Framer Component: Gradient Strips BG
$12.00
Get it for$12.00
Tags
Framer
Framer component
Six metaballs drift across a WebGL canvas, blending into a 3-stop color gradient that gets dot-printed in real time. Bright zones produce fat, dense dots. Dark zones shrink to near-nothing. A sine wave pulses through the whole grid, so the thing never quite sits still.
The halftone effect runs at the shader level — each dot's size is calculated from the luminance underneath it, per frame. The metaballs have domain warp applied, so they can hold tight circular shapes or stretch into something more organic depending on your setting. A vignette pulls the edges back. Mouse hover either pulls the field toward the cursor or pushes it away.
Five presets cover the obvious palettes (Ocean, Sunset, Neon, Forest, Mono), but all three gradient stops are exposed as custom color controls if you'd rather start from scratch.
What's controllable:
Color preset or custom 3-stop gradient
Dot shape: circle, square, diamond, or hollow ring
Domain warp — how round or amoeba-like the metaballs read
Wave ripple — how much the dots breathe over time
Mouse interaction — attract or repel
Quality: full retina or half-res for lower-end devices
No dependencies. Drop it on a section, adjust the props panel, done.
Sanna's other products
Framer Component: Curved Text Ticker Pro
$12.00
Framer Component: Gradient Strips BG
$12.00
$12.00
Buy