# algoray.in: Animation Plan

## Brand read (from algo_logo.png)
- Palette: signal green (~#52C560), graphite grey (~#6B6B6B). Add near-black (#0B0D0C) as the stage.
- The mark: a green "a" loop with a grey "r" arc that reads as a **ray leaving a lens**. That is the whole story: *algo* (structure) → *Ray* (light, clarity).
- Only a PNG exists. Step 0 is tracing it to SVG (needed for stroke/morph animation).

## Skill verdicts
| Skill | Use? | For what |
|---|---|---|
| `animatedwebs:site` / `hero` / `background` / `component` / `style` | YES, primary | Pull the closest template, cinematic hero/background, premium micro-components (magnetic buttons, text effects), DESIGN.md tokens. Needs AnimatedWebs sign-in; source code is a Pro feature. |
| `parallax-threejs:*` | YES, as the WebGL toolbelt | `shader-reviewer` on every GLSL edit, `checkpoint`/`diff` to catch visual regressions, `sync-view` for camera angles, `memcheck` for leaks, `visual-debugger` when it looks wrong, `ship-check` (Lighthouse + Core Web Vitals) before launch. It debugs/QA's Three.js; it does not design. |
| `liquid-skills:*` | NO | Shopify Liquid themes only. Use it only if algoray.in will run on Shopify. |
| `design-taste-frontend`, `high-end-visual-design` | YES | Stops the generic-AI look; spacing, type, shadows. |
| `gpt-taste` | YES (motion rules) | Strict GSAP ScrollTrigger pinning/stacking/scrubbing patterns. |
| `image-to-code` | Optional | Generate section comps first, then build to match. |
| `brandkit` | Optional | Quick brand board from the logo. |
| `mattpocock-skills:grill-me` | Start here | Settle the unknowns (what AlgoRay sells, audience, CTA) before building. |
| `mattpocock-skills:prototype` | YES | Throwaway hero-shader test before committing. |
| `mattpocock-skills:code-review` | End | Review the final diff. |
| `design:accessibility-review` | End | Reduced-motion, contrast, keyboard. |

## Creative concept: "Follow the Ray"
One continuous beam of light travels the whole page. Each section is something the ray *reveals*.

1. **Preloader (2.5s)**: the green "a" loop draws itself as a stroke, the grey arc detaches and sweeps across the screen like a lens flare, wiping to the hero. The wordmark letters stagger in; "Ray" ignites green.
2. **Hero**: near-black stage, a GLSL flow-field of thousands of green particles (the "algo": data/order emerging from noise). Cursor = light source; particles align along the ray from the "a" to the cursor. Cinematic AnimatedWebs video/shader background as the fallback layer.
3. **Parallax depth**: 4-5 layers (grid plane, dust, bokeh, beam, foreground glyphs) moving at different rates on scroll and mouse tilt.
4. **"Algo → Ray" scroll story (pinned, scrubbed)**: chaotic scattered nodes snap into a clean grid/graph as you scroll; the beam passes through and the nodes light green. Headline text scrambles into place.
5. **Services/work**: cards with 3D tilt + magnetic cursor, light-sweep on hover, number counters.
6. **Process**: horizontal pinned scroll, the ray as a progress line.
7. **CTA/footer**: giant outlined logo revealed by a cursor-following light mask; "a" loop morphs into the contact button.
8. **Global**: Lenis smooth scroll, custom cursor (a small ray-dot), page-transition wipes, text-split reveals.

## Stack
Vite + TypeScript, GSAP + ScrollTrigger, Lenis, Three.js (lazy-loaded, hero only), plain CSS custom properties. Static build, easy to host on algoray.in.

## Guardrails
- `prefers-reduced-motion`: swap to fades, stop particles.
- Mobile: fewer particles, no WebGL below a GPU/width threshold, poster image fallback.
- Targets: LCP < 2.5s, 60fps on mid laptop, hero JS < 200KB before lazy WebGL.
- No scroll-jacking that traps keyboard users; visible focus states.

## Build order
0. Trace logo to SVG, extract palette → `animatedwebs:style` → DESIGN.md
1. `grill-me` (content + goals)
2. `prototype` the hero shader; `parallax-threejs:checkpoint`
3. Skeleton + Lenis + GSAP sections
4. Hero + preloader
5. Scroll story + parallax
6. Cards/cursor/footer
7. `shader-reviewer`, `memcheck`, `ship-check`, accessibility review, `code-review`

## Master prompt
See the chat reply; copy it from there or from the section below.

```
Build algoray.in, a premium, award-level animated marketing site, in /var/www/algoray_web.

BRAND: logo at ./algo_logo.png (green "a" loop + grey "r" arc = a ray leaving a lens). Palette: green #52C560, graphite #6B6B6B, stage #0B0D0C. First trace the logo to a clean SVG.
CONCEPT: "Follow the Ray": one beam of light travels the page; each section is something it reveals. "algo" = structure, "Ray" = clarity.
BUSINESS: [what AlgoRay does] | AUDIENCE: [who] | PRIMARY CTA: [action] | PAGES/SECTIONS: Hero, Algo→Ray story, Services, Process, Work/Proof, Contact.

SKILLS, in this order:
1. grill-me: ask me the unknowns above before coding.
2. animatedwebs:style, then animatedwebs:browse/site: pick the closest template for structure, hero and background; export DESIGN.md tokens from the logo palette.
3. design-taste-frontend + high-end-visual-design: typography, spacing, no generic AI look.
4. gpt-taste: GSAP ScrollTrigger rules for pinning/scrubbing.
5. prototype: throwaway GLSL particle flow-field hero first (green particles aligning to a ray from the "a" to the cursor).
6. parallax-threejs: run shader-reviewer after each GLSL edit; checkpoint/diff for visual changes; memcheck; ship-check at the end.
7. Skip liquid-skills (Shopify only).

MOTION SPEC: SVG stroke-draw preloader that wipes into the hero; Three.js hero (lazy-loaded); 4-5 layer parallax on scroll + mouse; pinned scrubbed "chaos nodes → ordered grid" story; magnetic buttons, 3D tilt cards, text-split/scramble reveals; horizontal pinned process with the ray as progress; footer logo revealed by a cursor light mask; Lenis smooth scroll; custom ray cursor.

STACK: Vite + TypeScript, GSAP + ScrollTrigger, Lenis, Three.js, vanilla CSS variables.
CONSTRAINTS: prefers-reduced-motion fallbacks; mobile WebGL fallback to poster/video; LCP < 2.5s; 60fps; keyboard + contrast a11y.
PROCESS: show me a plan and the hero prototype before building the rest. Finish with accessibility review and code-review.
```