Product
Raven Edge
The website for a full-stack product agency, and the first site I built entirely from my own components: WebGL, Rive and full light and dark themes.
Company
RavenEdge
Role
Founding product designer · design and build
Duration
Nov 2025 – Feb 2026
Toolkit
Framer, custom code components, WebGL, Rive
At a glance
The problem
An agency that builds products for others needed its own site to prove the craft, using techniques few Framer sites were using yet.
What I made
An introductory website for RavenEdge built entirely from custom components, with WebGL, Rive animation and complete light and dark themes.
100% custom components
2 complete themes, light and dark
WebGL + Rive, inside Framer
Context
RavenEdge is a full-stack digital agency. It designs, builds and launches websites, web apps and mobile apps for startups, healthcare and education, e-commerce and enterprise teams. I joined as its founding product designer, and my first job was the agency’s own website.
An agency’s site is its first portfolio piece. If it looks like everyone else’s, the pitch is lost before the first call. At the time, most Framer sites were assembled from components found online, and WebGL, Rive animation and a complete light and dark theme were still mostly concepts on Framer sites and on the web in general.
The problem
Introduce an agency that builds end to end, so the site itself proves the claim. Make it feel ahead of its time, in a tool most people used for simpler sites, and build it without falling back on parts every other site already uses.
Every component was designed twice, once for each theme.
Discovery
The ideas I wanted didn’t exist as ready-made pieces. Searching the web for code components gave me things that were close but not right, and every site using them looked a little like every other site using them.
So I made a decision that changed how I work: I’d build every component on RavenEdge myself. That meant learning how Framer actually works underneath, not just how to arrange things on its canvas.
The content gave the structure: what the agency builds, the four-step process it follows (discovery, design and planning, development with feedback at 50% and 100%, and final delivery), the team, the work, and the questions clients always ask.
WebGL inside a Framer site, built as my own component.
Exploring
Three ideas carried the site:
WebGL and Web3-style visuals for depth and motion, so the introduction felt like a product, not a brochure.
Rive for animation that reacts to the visitor instead of just playing on a loop.
A full light and dark theme. Not a dark mode bolted on at the end: every component was designed and checked in both.
Small moments got the same care. The team section reveals each person on hover, with one “stealth member” hidden until you find them, and the footer hides a “click me” next to my credit.
Even the team section had to feel built, not filled in.
The final design
An introductory site with a home page, the work (Ossam Hospital, Helix Biostructures, Givingli and Agile by Design), an about page and a booking page. Every component on it is my own, from the navigation to the WebGL and Rive pieces, all working in both themes.
Building it
Building from scratch taught me more about Framer than any tutorial: code components, how they take settings in the editor, and how to make them behave the same in light and dark. It was slower than downloading parts, and it was the reason I stopped downloading parts.
Nothing from a marketplace. Every piece built for this site.
Impact
RavenEdge got a site that looks like nothing else, because nothing on it came from anywhere else. The bigger impact was on me: it’s the project where I went from using Framer to building for it. Every site since, including Motion Labs and this portfolio, is made from my own components.
Looking back
Building it myself was slower at first and faster forever after.
Designing both themes from the first component is far easier than adding one at the end.
Today I’d set a performance budget for WebGL on phones from day one.
Next case study