Anass.pro-style narrative pitch sites

This skill captures the design system, interaction patterns, and authoring playbook behind anass.pro — a single-file, vanilla-JS, hyper-personalized pitch site that uses an interactive pixel-art game, procedural Web Audio SFX, scroll-revealed scenes and behavioral copywriting to address exactly one named reader.

Use it when the user wants to build something with the same DNA: a one-recipient narrative landing page that feels designed for them and only them.

What you are recreating

Anass.pro is not a generic portfolio. It is a behavioral pitch built around four ideas:

1. One reader, one URL. The site is addressed to a specific named person. Their name appears in the HUD, in narrative cards, and inside the storytelling. No one else receives this URL.
2. Story as architecture. The page is a sequence of scenes (Hero → Hook → Mirror → Method → Reveal → Person → Close). Each scene has a psychological job — capture, rupture, reappraisal — not just "section + content".
3. The medium is the message. The interactive pixel-art game in the hero is itself the proof of capability. A typewriter with key clicks, a counter that ticks up to 8.6M, a character that follows the user across scenes — every effect demonstrates the engineering claim the copy is making.
4. Single-file, no framework. The whole thing ships as one ~120 KB HTML file with inline <style> and <script>, vanilla JS classes, a Canvas 2D engine, and Web Audio API for procedural sound. No build, no React, no audio assets.

If the user wants a generic personal portfolio, stop and switch to `frontend-design`. Use this skill only when the brief is a one-recipient pitch / candidacy / narrative landing page.

Workflow when invoked

Task progress:
- [ ] 1. Confirm fit: is there ONE specific named recipient and a story to tell about them?
- [ ] 2. Gather inputs: recipient name + role, sender pitch, 2-4 specific facts about the recipient, the "ask" (CTA target), assets (logos), language/tone
- [ ] 3. Pick a scene sequence (use the 7-scene default, or adapt)
- [ ] 4. Lock the design tokens (see references/design-tokens.md) — pick palette + 4 fonts
- [ ] 5. Scaffold the single HTML file from templates/starter.html
- [ ] 6. Implement scenes top-to-bottom using references/section-recipes.md
- [ ] 7. Wire the signature interactions (references/animation-patterns.md)
- [ ] 8. Add procedural Web Audio SFX if appropriate (references/web-audio-sfx.md)
- [ ] 9. Add the pixel-art canvas hero if appropriate (references/pixel-game-canvas.md)
- [ ] 10. Verify reduced-motion + mobile breakpoints + a11y

Stop after step 2 and confirm the brief with the user before scaffolding. The whole point of the format is that it knows the reader; if you don't have specifics about the reader, the site collapses into another generic template.

Step 1 — Confirm fit

Ask the user (briefly, one round of questions only):

• Who is the one reader? Name, role, company. The site addresses them by name.
• What do they already do well? 1-3 specific facts. The "Mirror" scene reflects these back. ("You ran a 500-wallet stunt at GITEX" works; "you do marketing" does not.)
• What is the sender pitching? A role, a partnership, a service. One thing.
• What is the CTA target? Usually a LinkedIn URL, an email, or a Calendly. Single button at the end.
• Language + tone? Anass.pro is French, intimate tu. Match the recipient's culture. Default to confrontational + complicit, not corporate.
• Assets? Brand logo, photo, illustrations. Optional — the site can run on pure CSS/canvas if needed.

If the user can't answer the "Who is the one reader?" or "What do they already do well?" questions concretely, don't build this. Push back: "this format only works when we can name specific things the reader has done. Otherwise it reads as fake intimacy. Want me to switch to a regular portfolio instead?"

Step 2 — Default scene sequence (the seven-scene narrative)

Use this exact sequence unless the user has a strong reason to deviate. Each scene has a CSS hook, a data-s index for the dot-nav, and a psychological job.

The user is allowed to skip Mirror or Method, but never skip Hero, Reveal, or Close — they carry the format's identity.

Step 3 — Lock the design tokens

Open references/design-tokens.md and pick (or accept the defaults):

• Palette — anass.pro defaults to dark midnight + electric purple + soft cyan. The reference file lists 5 alternative palettes that preserve the architecture.
• Type system — 4 fonts, one role each:
• Display (condensed bold) → section titles, hooks
• Body (humanist sans) → paragraphs, italic asides
• Mono (technical) → labels, kickers, chips, codes
• Italic display serif → emotional moments, quotes, sign-offs
• Defaults: Barlow / Barlow Condensed / JetBrains Mono / Fraunces. Don't substitute Inter — it kills the voice.
• Cursor mode — desktop default is cursor:none + custom dot+ring follower. Touch devices fall back to native cursor.

Inject all tokens as :root CSS variables. Reference: references/design-tokens.md.

Step 4 — Scaffold the file

Start from templates/starter.html. It contains:

• The exact :root design tokens
• All seven scene wrappers with correct ids and data-s indices
• Custom cursor + progress bar + dot nav + sound toggle + next-cue + back-top elements pre-wired
• A minimal GameEngine stub, a Typer class, the Splitter, the IntersectionObserver reveal, and the magnetic-CTA loop
• Reduced-motion media query
• Mobile breakpoints

Copy it, then rename ids/classes only if you have a strong reason. The class names (.scene, .rv, .sw, .grad, .pu, .cs-arr) are referenced from multiple scripts and CSS rules — keep them.

Step 5 — Implement scenes

For each scene, follow the recipe in references/section-recipes.md. The reference file gives you, per scene:

• The HTML skeleton (copy-paste)
• Required CSS (already in starter.html)
• Animation hooks (which classes to add: .rv, .rv.split, .d1/.d2/.d3 stagger, etc.)
• Copy structure (kicker → title → sub → body → CTA), with the rationale for each

Two non-negotiables across all scenes:

1. Use `<span class="pu">…</span>` to highlight key purple words (the recipient's words, the specific numbers, the verbs of action).
2. Use `<span class="grad">…</span>` to gradient-clip the most emotional phrase per scene — never more than one per scene. Overuse kills it.

Step 6 — Wire the signature interactions

These six interactions are the format. Skip them and you have a dark purple landing page; include them and you have an anass.pro-style site. Implement in this order, each is independent:

1. Custom cursor (dot + ring with smooth follow, scale-up on links). Skip on touch.
2. Scroll progress bar at the top, gradient-filled.
3. Right-side dot navigation, IntersectionObserver-driven, click to scroll.
4. Scroll reveal — .rv class fades up when in view; .rv.split splits text into per-word spans with --i index for staggered fade.
5. Typewriter with character-by-character reveal and per-keystroke audio click. Punctuation pauses (commas → +90ms, periods → +160ms).
6. Magnetic CTA — desktop only, the CTA gently follows the cursor when within 160px.

Optional but high-impact:

1. Persistent character buddy — a pixel sprite that jumps with a parabolic arc to the currently-visible section.
2. Animated counter that ticks up with audio clicks every N units, then a final "ding".

All recipes in references/animation-patterns.md.

Step 7 — Procedural Web Audio SFX

The site has zero audio files. Every sound is synthesized at runtime via AudioContext. This is fundamental to the "all-craft" feeling. Read references/web-audio-sfx.md for ready-to-paste recipes for:

• key (typewriter click + thud) — fires on every typed character
• click (UI confirmation)
• ding (counter completion)
• tick (counter pulse)
• cta (CTA hover/click)
• spell (game projectile)
• explosion (game boss death — noise + lowpass sweep)
• monster (boss arrival — 4-layer: thud + sawtooth drone + tension sine + whoosh)
• jumpLand (character lands after a jump arc)

Wrap them in a single SFX module with a global mute toggle, persisted to localStorage. Default to muted-but-armed: the toggle reads "Activer les sons" on first load — never autoplay.

Step 8 — Pixel-art canvas hero (optional, recommended)

The hero is the format's signature. If the project has time/budget, implement it. Reference: references/pixel-game-canvas.md. Key architecture:

• Single <canvas id="game-canvas"> filling the viewport
• A GameEngine class with update(now) / render() running on requestAnimationFrame
• 3 parallax building layers + animated stars + procedural ground/road
• Procedurally-drawn 8-frame walking sprite (no sprite sheet — pure ctx.fillRect)
• Phase machine: 0=walk-in → 1/2/3=boss fights → 4=victory walk → 7=final reveal
• Speech-bubble "intro card" + a side stack of past dialogue cards
• Bezier-curve pointer arrows from card to character

If the project is constrained, replace the game with a static animated illustration (canvas star field + parallax buildings, no characters/bosses). The narrative still works.

Step 9 — Accessibility, performance, mobile

Non-negotiable checks before shipping:

• @media (prefers-reduced-motion: reduce) collapses all transitions/animations to 0.01ms
• Native cursor on touch (@media (hover:none) or width <= 768px)
• All interactive game/SFX elements are duplicated as visible HTML so screen readers see the content
• Live region (<div aria-live="polite">) announces phase transitions if you implement the game
• All images have alt; decorative images use aria-hidden="true" and empty alt
• The CTA is a real <a href="…">, not a div
• Mobile: dot nav, custom cursor, magnetic CTA all disabled. Game scales sprites to 0.65×.
• The single HTML file should stay under 200 KB. Inline SVG noise; don't link to image files unless necessary.

Common mistakes to avoid

Reference files (read on demand)

• references/design-tokens.md — Colors, type system, spacing scale, alternative palettes
• references/section-recipes.md — HTML/CSS skeletons for each of the 7 scenes
• references/animation-patterns.md — Cursor, reveal, typewriter, magnetic CTA, character buddy, counter
• references/web-audio-sfx.md — Procedural sound recipes (copy-paste functions)
• references/pixel-game-canvas.md — Game engine architecture, sprite drawing, parallax, bosses
• references/copywriting-playbook.md — Voice, tone, structure formulas for each scene's text
• templates/starter.html — A complete, working scaffold to copy from

Read each reference file only when you reach the corresponding step. They're all under 400 lines so a single read is cheap.

When NOT to use this skill

• Generic personal portfolio (broad audience) → use frontend-design instead
• Marketing landing page for a SaaS → use ui-ux-pro-max or slides
• Multi-page site with navigation → wrong format; this skill is for one scrollable page addressed to one reader
• Light/airy / corporate brand → wrong palette; this format is dark, intense, and confrontational
• The user can't name the recipient or specific facts about them → push back, don't fake intimacy