THE BRIEF
FRAMER · UNICORN STUDIO · CUSTOM CODE
THE PROBLEM
FIGMA TO FRAMER · SHADER · TERMINAL ANIMATION
Layercode was launching their CLI — a tool for building and deploying voice AI agents from the command line. The design was done in Figma. What they needed was someone to bring it to life in Framer accurately, and build two components that couldn't come from the design file: a hero background shader and an animated terminal showing the CLI in action.
THE SOLUTION
Built the hero background as a shader in Unicorn Studio and integrated it into Framer. The dark, warm gradient mesh visible behind the CLI hero sets the tone for the entire page — technical but not cold. A static background couldn't have done the same job.
Animated Terminal Component
Built a custom Framer component that animates the terminal sequence shown in the hero — replicating the MCP loading flow a developer would see when running npx @layercode/cli init. The animation runs on load, giving visitors an immediate sense of what using the tool actually feels like.
VISUAL SYSTEM & OUTPUT
Developer tools live and die by first impressions with developers. The terminal animation wasn't decoration — it was the fastest way to show what the CLI does without writing a word of copy. The shader gave the page warmth without breaking the dark technical aesthetic. Both components were built in Framer from scratch, on top of the Figma design that handled everything else.
Everything new in Framer, monthly.
Product updates, fresh templates & components, and Berlin Framer meetups — one email a month, no spam.