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.

#	Section id	Title pattern	Job	Required elements
0	#game-hero	(no heading — the hero IS a game)	Capture: trigger pattern-recognition in the first 3 seconds	Pixel-art canvas, HUD with recipient's name, intro speech card, persistent CTA pill
1	#s-hook	"You did X. I do Y. Same principle."	Hook: state the analogy between the reader's work and the site itself	Brand bar, 3 typewritten lines, animated counter, italic aside
2	#s1 (Mirror)	"You used 500 X. I use one."	Mirror: prove you understand them by tabulating their move next to yours	2-column compare table with row labels
3	#s2 (Method)	A quote from the recipient	Method: 3 expandable steps explaining the psychology of what just happened	3-card flex-grow row, big italic ordinal numbers, closing line
4	#s3 (Reveal)	"What you just lived through is X."	Reveal: name the technique. Italic gradient title.	Centered, watermark logo glowing behind, body + pull quote
5	#s4 (Person)	"A. R." (sender)	Person: brief identity + stats + project grid	2-col grid: stats left, bio + chips + project tiles right
6	#s5 (Close)	"Now you know what I do when I want something."	Close: the ask. One gradient CTA. Italic Fraunces sign-off.	Big condensed headline, body, single magnetic CTA, small meta line, italic sig

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:

7. Persistent character buddy — a pixel sprite that jumps with a parabolic arc to the currently-visible section.
8. 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

Trap	Fix
Generic copy ("I'm a passionate developer")	Quote the recipient. Reference their specific work. Use tu/intimate form.
Inter / Roboto / system fonts	Use the Barlow + Fraunces stack. Distinctive type carries the voice.
Gradient on every heading	Exactly one .grad per scene. The rest is .pu (purple ink) for emphasis.
Audio on autoplay	Default muted. Toggle is opt-in.
Heavy build pipeline	Single HTML file. No bundler. The constraint is the point.
Multiple CTAs	One CTA in the Close. The Hero CTA only appears after the user scrolls back to the top after reading.
Overdone parallax	3 building layers max. More noise, less signal.
Skipping the Reveal scene	The Reveal is what reframes the whole experience as engineering. Without it the site reads as gimmick.

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