First Framer build: 3D SaaS landing page with custom WebGL
Sabin Mainali
Lathmere is my first Framer project. I built it on 25 September 2026 as a test for myself: one complete one-page 3D website on Framer's free plan, for a made-up AI product that reads invoices. The work was AI-assisted with Claude Code and Framer's official agent tools, and human-checked.
What was the test?
I wanted to know if I could ship a premium 3D site in Framer without paying for anything. The rules I set:
Framer's free plan only.
No Spline, no 3D model files and no paid plugins.
It must work on desktop, tablet and phone.
The page must say clearly that the brand is made up.
What did I build?
A 3D object in a Framer code component: one custom WebGL shader that draws five shapes. As you scroll, it changes from a liquid blob to a scanned sphere, then to three spheres that lock together, then to a solid cube. A ring version sits behind the final call to action.
An invoice demo in a second code component, built with React and framer-motion. Visitors pick a case (clean match, short delivery or price change), press Run and watch the fields fill a ledger record. The sample numbers add up in all three cases.
Everything else in native Framer: layout, text styles, colour tokens, three breakpoints (1200, 810 and 390 px), a review queue and feature cards that tilt in 3D with Framer's own effects, pricing and an FAQ.
Property controls on both code components, so colours, size, speed and the demo case can be changed in Framer's panel without code.
Search basics: page title, meta description, share image, favicon and FAQ structured data.
The five shapes from one shader: Raw, Read, Match, Write and Close.
The invoice demo. The supplier and the numbers are made up.
How did I check it?
I published the site and tested it at 1440, 1024, 810 and 390 px wide.
Every link and button can be reached with the Tab key in a sensible order, and the demo tabs switch with the arrow keys.
A Pause motion button stops the 3D motion and remembers the choice. Reduced-motion settings are respected.
On a device without a graphics chip, the shader is skipped and still images of each shape are shown instead.
axe found 0 WCAG A and AA issues, and Google Lighthouse scored 100 for accessibility on mobile and desktop.
The same page on desktop, tablet and phone.
What was the result?
A live one-page site: full-memory-054539.framer.app
5 shapes from 1 shader, 0 3D files, 2 code components and 3 breakpoints.
Built in one day on the free plan, with $0 spent.
The review queue uses Framer's native 3D effects, no extra code.
What would this look like for your business?
I can build a marketing site for your SaaS or AI product in Framer the same way: a clear page structure, custom interactions where Framer's built-in tools stop, layouts for desktop, tablet and phone, and accessibility checks before launch. That is my "Fast marketing website for a SaaS or startup" service, $1,500 on Contra.
Like this project
Posted Sep 25, 2026
Self-set test and my first Framer site: a one-page 3D website for a made-up AI invoice product, built with a custom WebGL shader and 2 code components.
Likes
0
Views
1
Timeline
Sep 25, 2026 - Sep 25, 2026
