Playbook
Tasteful Skills
“Tasteful Skills” argues that the best agent skills are not documentation or best-practice lists.
Back to Podcast Digest
How We Designed Monologue's Landing Page With Framer
TL;DR
Monologue’s landing page was designed to look nothing like the category defaults — Lucas Crespon says they intentionally went dark, loud, and skeuomorphic to stand apart from minimalist AI dictation competitors like Whisperflow.
Framer became the speed layer between Figma and launch — Daniel built the hero in Figma first, then translated it “pixel by pixel” into Framer so the team could iterate quickly with animations, feedback, and launch-ready polish.
They cut website costs by replacing exported shader videos with code-based Paper shaders — Lucas explains that traffic made video-heavy backgrounds expensive, so they switched to Paper shaders via Framer Workshop to reduce bandwidth and media load.
Interactive storytelling mattered more than simple motion — for Monologue’s feature explainer, animator Valerio built a Rive animation because MP4s and Lottie files couldn’t deliver the responsive, breakpoint-specific interactivity they wanted.
The site borrows directly from the product’s physical feel — Daniel reused textures, noise, shadows, inner shadows, and actual product vectors so the website feels like the same tactile object as Monologue’s Mac and iOS apps.
Even the footer and CTAs were treated like product experiences, not generic web elements — instead of a sitemap-style footer or standard button, they made the final section a giant closing CTA and embedded the main download action into the device itself.
The Breakdown
Designing for difference, not category compliance
Lucas opens by framing Monologue as Every’s AI dictation product and says the whole brand started with one goal: make it unmistakable. The landing page wasn’t just supposed to explain the app — it had to reject the usual minimalist SaaS look and go darker, louder, and more skeuomorphic than the competition.
The hero section as the first punch in the face
The page leads with a dramatic hero centered on the “monophone,” which Lucas calls the main character of the Monologue app on macOS. Daniel says this was all about making a launch-level first impression, and Framer let him take a Figma concept and recreate it exactly, then layer in animation, light rays, waves, and motion to make it feel alive.
Framer’s messy canvas is the point
When they zoom out, the project looks like a “spiderweb” of connectors and layers, but Lucas treats that as proof of how Framer replaces static design handoff near launch. Instead of lingering in Figma, the team could move faster inside the actual site canvas, getting rapid reactions and iterating in something much closer to the final experience.
Reusable brand signatures and a smarter shader pipeline
Lucas points out a recurring “stamp” component used across Every products like Spiral, Sparkle, and Cora — a small but deliberate signature showing who made the product. Then they get into the paper shader animation: it originally existed as recorded video exports from Paper, but rising traffic made the page more expensive, so they switched to using the actual shader code through Framer Workshop to cut bandwidth and media costs.
Why they brought in Rive for the feature story
For the section explaining Monologue’s three core features, they worked with animator Valerio, whom Lucas calls “one of the best animators in the game.” The choice of Rive was practical: they needed animation that could be interactive and rebuilt for different breakpoints, not just dropped in as an MP4 or Lottie, and they liked details like the rotating loading indicator between sections.
Making the website feel touchable
A big part of the conversation is how closely the site mirrors the product itself. Daniel says Monologue has “physical devices on a digital world,” so he layered texture, noise, shadows, and depth across the page to make it feel like something you could almost touch — especially fitting for a brand built around voice recorders and hardware-like UI.
The footer, buttons, and Easter eggs all sell the same feeling
Lucas says they didn’t want the footer to become a boring sitemap, so they turned it into one last giant CTA with oversized typography, a device render, wave effects, and a bright “download for Mac” button. Even better, the main CTA isn’t a normal web button — it’s embedded into the device itself, giving users a preview of the product through the interaction.
Shipping changes fast, then seeing the design get noticed
When Every later shipped the iOS app, Framer made it easy to add a new promotional section and tiny “Easter egg” enhancements without reworking everything. Daniel notes that some of those details, like the speaker holes, are actual vectors copied from the product and enhanced with inner shadows, and both of them end by saying this became one of Every’s most polished launches — with recognition from Mobbin, Land-book, and other design-reference sites.
Share
Keep Reading
Two Ways to Follow
The Weekly Echo. The inbox-shaped summary of what mattered.
New editorials announced here.
