I built an aurora hero with a pixel-dither effect for Framer, with a typewriter prompt box

Hey everyone,

I made a hero section for AI and developer-tool sites and wanted to share it.

A dark hero with an aurora background drawn in raw WebGL, with no external libraries. Soft layers of light drift behind the headline, and an ordered-dither pixel effect makes individual pixels crawl as the colors shift. Under the headline is a glass-style prompt box whose placeholder types out example prompts in a loop.

Color values: ControlType.Color can return hex, rgb() or hsl() strings. Parse all three, or a value you didn't expect will quietly fall back to a default color.

Ordered dithering: Pin a fixed threshold pattern to the screen and quantize each pixel block against it. Because the pattern doesn't move, the pixels flip between levels as the image behind them drifts. That flipping is the crawling effect.

Keeping the hero dark in any theme: Framer publishes color styles as CSS variables. A small code override that redeclares them on the hero element re-themes everything inside it, including component instances, without touching the rest of the page.

Typewriter placeholder: A code override changes the input's placeholder directly, so the input's actual value is never touched.

Customizable from the properties panel Background and three aurora colors, speed, scale, distortion, grain, pixel size, pixel amount, color steps, cursor glow, and a freeze switch.

I'd like to hear how it performs on your devices, especially older phones. Happy to answer questions about the WebGL setup or the overrides.

Preview: https://pixel-hero.framer.website/

I built an aurora hero with a pixel-dither effect for Framer, with a typewriter prompt box

Hey everyone,

I made a hero section for AI and developer-tool sites and wanted to share it.

A dark hero with an aurora background drawn in raw WebGL, with no external libraries. Soft layers of light drift behind the headline, and an ordered-dither pixel effect makes individual pixels crawl as the colors shift. Under the headline is a glass-style prompt box whose placeholder types out example prompts in a loop.

Color values: ControlType.Color can return hex, rgb() or hsl() strings. Parse all three, or a value you didn't expect will quietly fall back to a default color.

Ordered dithering: Pin a fixed threshold pattern to the screen and quantize each pixel block against it. Because the pattern doesn't move, the pixels flip between levels as the image behind them drifts. That flipping is the crawling effect.

Keeping the hero dark in any theme: Framer publishes color styles as CSS variables. A small code override that redeclares them on the hero element re-themes everything inside it, including component instances, without touching the rest of the page.

Typewriter placeholder: A code override changes the input's placeholder directly, so the input's actual value is never touched.

Customizable from the properties panel Background and three aurora colors, speed, scale, distortion, grain, pixel size, pixel amount, color steps, cursor glow, and a freeze switch.

I'd like to hear how it performs on your devices, especially older phones. Happy to answer questions about the WebGL setup or the overrides.

Preview: https://pixel-hero.framer.website/