Prism Labs

# Prism Labs — AI Research Lab Website

## Goal
Build a production-ready ai research lab website called "Prism Labs". Overall vibe: frontier research made tangible — serious science with playful demos. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: deep space #0A0A10 base, soft white text, iridescent accent gradient (violet #8B5CF6 → cyan #22D3EE → emerald #34D399) used only inside tiles
- **Typography**: Inter tight; mono for model names, benchmark numbers and paper IDs
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — minimal: logo, Research/Models/Blog/Careers, 'Try the playground' pill with animated gradient border.
2. **Hero bento** — 12-col grid of mixed-size tiles: 2x2 mission statement, 1x1 live parameter counter, 2x1 latest model card with sparkline, 1x1 rotating 3D prism (CSS), 1x2 benchmark bar chart, 1x1 careers teaser — all visible above the fold.
3. **Model family** — 3 large tiles (Nano / Standard / Ultra), each with context window, speed and a tiny latency histogram; hovering lifts the tile and reveals a 'Read the card' link.
4. **Interactive demo tile** — full-width: a prompt input with 3 canned example chips; clicking one types the answer out token-by-token in the tile.
5. **Papers grid** — 6 publication tiles: title, venue badge, citation count; sorted-by dropdown animates reorder with layout animations.
6. **Safety statement** — calm single-column prose block — the one intentionally quiet section on the page.
7. **Footer** — compact, with a model status row (API uptime dots).

## Motion
- Tiles enter with staggered scale 0.96→1 + fade, 40ms apart, container-level once.
- Gradient accents drift slowly (20s hue loop) only inside tiles, never on text.
- Reorder in papers grid uses FLIP layout animation, 400ms spring.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Every tile has an inner 1px border that brightens on hover — the grid should feel alive but never noisy.
- Token-by-token demo output uses 18ms/char with a blinking caret; instant-complete on reduced motion.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.