Credit card landing page design for a fintech startup — an interactive 3D claw machine that turns the offer into the hero instead of another floating card at 15 degrees. Every card brand ships the same hero: a card hovering over a gradient. Clawd sells one card, not a marketplace, and the entire pitch is "stop comparing — we already did the comparing". So the landing page had to make a single-product offer read as a win rather than a shortage of options, and pull early-access sign-ups from people who are deliberate about money: the ones who actually track spending and read the APR line.

The metaphor does the positioning work. A claw machine that never misses, plus "we already picked the best one", means the visual is the argument and the headline doesn't have to explain itself. I built the scene in Blender as an interactive element rather than a still render — the claw follows the cursor, the card tilts in the grip, and the pile underneath reacts, so a visitor plays with the product's core idea for a few seconds instead of scrolling past it. Hero plus full page structure, desktop and mobile designed separately, the Blender scene with web-ready exports, interaction notes, and a developer-ready Figma file.

nice work

An interlocking gear-train workbench with true ratios and brass-blueprint charm.

I built this project to test An interlocking gear-train workbench with true ratios and brass-blueprint charm. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.

WHAT I WAS TESTING: I focused on two core engineering benchmarks:

Real-time gear mesh torque transfer and escapement tick mechanics

Interactive placement of interlocking brass gears with variable ratios

THE TECHNICAL SIDE: Implements true involute tooth profiles computed via parametric equations. Rotational speeds are propagated through an adjacency graph of connected gear nodes. Everything executes in the browser using Canvas2D, Mechanical Gear Physics, Involute Gear Tooth Profiles. No third-party frameworks, no heavy runtime bundles, and zero external tracking.

WHAT I LEARNED: Floating-point precision drift caused gear teeth to gradually overlap after several minutes. Clamping phase angles to gear pitch intervals solved the drift. Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.

TRY IT YOURSELF: The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.

If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.

Built by Samin Sami | Developer & 3D Experimentation

Steampunk vibe👍