Co-founder & Frontend Developer / Project 16
100b.studio
Studio landing page · Cinematic visuals and interactive engineering storytelling
What I built
I’m a co-founder and frontend developer at 100b.studio. My work on our public website includes a configurable wireframe hero, animated capability diagrams, a scroll-linked process timeline, and a project-inquiry flow. The interface brings our services, work, and engagement process into one visual story.
- Landing-page design
- Canvas visuals
- Scroll interactions
- Inquiry flow
- My role
- Co-founder & Frontend Developer
- Tools & technologies
- Next.js · React · TypeScript · Tailwind CSS · Canvas 2D · Framer Motion
01 / The project
The experience
in context.
100b.studio is the full-stack engineering studio I co-founded, where I also work as a frontend developer. Our public website combines warm paper surfaces and strong typography with wireframe graphics, cinematic interludes, and interactive diagrams. Visitors move from our studio’s positioning through capabilities, process, projects, team, and terms before sending a brief. My frontend work focuses on implementation and interaction flow.
The user flow
- 01Explore the studio
- 02Adjust the hero visual
- 03Inspect capabilities
- 04Follow the process timeline
- 05Review work and team
- 06Read engagement terms
- 07Send a project brief
02 / The making
What went
into it.
A cinematic visual system
Cream and paper surfaces, dark ink, monospaced labels, and saffron-to-coral accents establish the current visual direction. Section markers and geometric graphics connect the hero, service explanations, projects, and contact area.
An interactive wireframe hero
A Canvas 2D scene sits behind the opening message. A tweaks panel exposes shape and accent choices, while progress readouts connect the graphics to the page’s technical character.
Explain the work through motion
Capability canvases illustrate SaaS, AI, and scale concepts. The process section maps Analyze → Design → Build → Scale onto a scroll-linked rail, with an active stage and a moving token making the sequence visible.
Navigation that follows the journey
The desktop top bar reveals near the top edge and tracks the active section. Mobile keeps navigation visible, while page progress and in-page links support a long scrolling experience.
A complete inquiry interface
The contact form collects a name, email, budget, timeline, and project description. Submitting, success, and error states give feedback, with direct email and a copy-address action as alternative contact paths.
Render detail with the viewport in mind
Canvas helpers account for pixel density and resizing, and small canvas scenes gate drawing by viewport visibility. The hero includes a reduced-motion check so the visual implementation can respond to motion preferences.