Just launched CodeCraft a dark, glossy Framer template for AI coding tools and developer products. ⚡️

I wanted a SaaS template that actually feels like a dev tool, a live editor mockup in the hero, a pixel-shader background, and pages developer products really need Docs, Changelog and a Status page with uptime bars and latency charts.

What's inside

• 17 responsive pages, hand tuned for desktop, tablet and phone

• CMS-powered Blog, Careers and Changelog

• Pricing with a monthly/annual toggle and animated price change

• Subtle interactions: word-by-word headline reveal, scroll fade-ins, card hover lifts

• 35+ components built on shared color and text styles

• Glossy illustrations that are simple image swaps, so rebranding takes minutes

It respects Reduced Motion and keeps animations light, so it stays fast.

Would love to hear what you think and if you build something with it, tag me. I'd love to see it. 🙌

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/

Excited to introduce AuraTherapy, an Awwwards-inspired Framer template crafted specifically for mental health professionals, therapy clinics, and wellness coaches.

Completely free. Get it now.