Fastest L1 Blockchain Ever

Apr 1, 2025
Role
Senior Design Engineer, Frontend Architect
Timeline
Apr 25 - Mar 26
Tech
React, Next.js, TypeScript, Tailwind CSS, Payload CMS, motion, Figma, WAGMI, Viem, shadcn, Turborepo
Design Responsibilities
Led full company rebrand through live interactive playgrounds. Designed the new homepage end-to-end. Owned design system governance and cross-team adoption.
Development Responsibilities
Architected frontend infrastructure for 7 prod dApps serving thousands of daily users. Built a 150+ component UI library with design tokens. New homepage designed and coded solo in one week (no external designer). ~200K MAU. Integrated headless CMS enabling no-code page-building for non-technical teams.

Frontend architecture and a full company rebrand for a high-performance L1: a 150+ component library and a solo-built homepage serving ~200K MAU.

150+
UI components
7
prod live dApps
1
monorepo

Hero-section experience

For the hero, I start with a fullscreen StarsCanvas and then shrink it into the exact bounds of the hero card using getBoundingClientRect() plus motion springs for scaleX, scaleY, and x/y, so the tunnel always lands perfectly on the card regardless of viewport.

During this intro I lock scrolling and control the starfield speed (targetSpeed) so it feels like a fast warp that eases into cruise mode. As the warp settles, I fade the layer out and bring in the heading, subheading, and CTA with a shared "fade-up + blur" variant and small index-based delays, so the content appears in a clean, intentional sequence with no layout jumps.

Micro-interactions and ambient visuals to tell a story

This final CTA experience is meant to feel like a transmission finally finding its audience.

The core text is a short list of translations rendered one at a time in the exact same physical position. By advancing the index every ~70ms and animating each entry with a small vertical offset and opacity change, it reads as a flickering broadcast rather than a hard text swap.

The multilingual text uses AnimatePresence with mode="popLayout" and keyed motion.divs. That ensures each language gets its own enter/exit animation (small y-offset and opacity curve), while the container layout stays stable and doesn't reflow adjacent content.

After the last text appears, I bring in two layered systems: a ShootingStars layer (rare, directional streaks) and a StarsBackground layer (dense twinkling points).

For the falling star, I use a ShootingStars SVG that picks a random edge, calculates the angle, and moves a single gradient across the screen each frame using Math.cos/Math.sin with a random speed and delay, so streaks feel rare and organic.

Behind that, StarsBackground uses a canvas and requestAnimationFrame to draw a field of tiny circles whose count depends on the container area (starDensity), and I animate their opacity with a simple Math.sin wave to get the twinkle effect.

Both layers are absolutely positioned and masked with Tailwind's radial masks to keep the glow centered around the CTA instead of covering the whole page.

Can honestly say he's one of the most uniquely talented people I've worked with. He has that rare combination of genuine design taste, a deep understanding of how things should look and feel, along with the technical skills to actually build it. He doesn't design in a vacuum; he makes smart trade-offs between what's ideal and what's realistic, and engineers genuinely enjoy collaborating with him because he speaks their language. Any team that gets to work with Adam is lucky to have him.

Ignacio Pastor — VP of Engineering