Helix.ai - LLM Research Landing Page
Doug Silkstone
Helix AI - Protein Folding Landing Page
Brief: Design exploration for a computational biology startup focused on AI-powered protein structure prediction.
Live Site: Helix.ai Context Journal
Challenge: Communicate cutting-edge science without alienating non-technical visitors. The visual language needed to feel both scientifically credible and distinctly modern.
The Stack
Next.js 16 with React 19 — latest stable versions for optimal performance
React Three Fiber — declarative Three.js for the 3D kaleidoscope scenes
Custom GLSL Shaders — hand-written for precise visual control
Motion (Framer Motion) — smooth entrance animations and scroll effects
Tailwind CSS v4 — utility-first styling with OKLch color space support
Science that feels alive.
Approach:
Built with Next.js 16, React 19, and React Three Fiber
Custom WebGL kaleidoscope effect using Bayer matrix ordered dithering — a nod to early scientific visualization while feeling fresh
Morphing 3D geometry (icosahedrons, tori, spheres) represents molecular complexity
Subdued violet palette balances "serious science" with visual intrigue
Monospace typography and grid-based layout reinforce precision
Technical Highlights:
Custom GLSL shaders for real-time dithering and optional metaball effects
Sub-50ms inference stats animated with scroll-triggered counters
Development debug panel for rapid shader iteration
Fully responsive with graceful 3D fallbacks on mobile
Outcome: A concept that positions AI protein folding as accessible and visually memorable - science that feels alive.
Like this project
Posted Nov 28, 2025
Communicate cutting-edge science without alienating non-technical visitors. The visual language needed to feel scientifically credible and distinctly modern.
Likes
3
Views
29
Timeline
Oct 1, 2025 - Ongoing
Clients
Helix
