Instituto +Brasal redesign — stacks D, E and F (with a reference) · v3

stack-{d|e|f}-.../
├── DESIGN.md                      # the Instituto's visual identity (IT EXISTS ALREADY — copy it into each stack)
├── referencia/
│   ├── motions-guia.md            # the guide of 17 motions (copy the file supplied)
│   ├── images/                    # screenshots of the reference (visual checking)
│   └── videos/                    # navigation recordings (feel checking)
└── images/                        # the Instituto's assets (filled in at Step 0 of the prompt)

npx skills add vercel-labs/agent-skills
npx skills add greensock/gsap-skills
npx impeccable install

# REDESIGN WITH A REFERENCE — INSTITUTO +BRASAL (HOME) — STACK D: GSAP EXECUTION

## Sources of truth (in this order; a conflict between them means asking me first)
1. DESIGN.md (root): the Instituto's visual identity (colors, fonts, spacing, elements). Follow it to the letter, and invent no tokens.
2. ./referencia/motions-guia.md: the catalog of 17 motions from the reference with implementation prompts. It is this project's motion specification.
3. https://www.brasal.com.br/instituto/: the content (verbatim texts, menu, sections). Immutable.
4. ./referencia/images/ and ./referencia/videos/: visual checking of the reference's feel and rhythm.

## Context
A redesign of the home page in Next.js 15 (App Router) + TypeScript + Tailwind. The HOME PAGE ONLY in this phase.
Content 100% identical to the current site. Identity 100% from the DESIGN.md. Motion 100% per the guide.

## Engine (per the guide — one engine per domain)
- GSAP 3.13+ + @gsap/react + ScrollTrigger + SplitText: the backbone (reveals, timelines, split, pin/scrub).
- Framer Motion (the motion package): micro-UI ONLY (the overlay menu, the cookie banner, form states, CTA hover).
- Lenis: global smooth scroll, synced per Prompt 0 of the guide.
- Embla Carousel: the horizontal timeline and carousels.
Read the guide's "classic traps" section BEFORE writing any component and follow all of them: useGSAP with scope, the 3-step Lenis cleanup, gsap.matchMedia, ScrollTrigger.refresh() after load, autoSplit after the fonts, autoAlpha against FOUC, the hero title animated a single time.

## Step 0 — Infrastructure
Run PROMPT 0 of the guide (./referencia/motions-guia.md) exactly as specified: the SmoothScrollProvider with Lenis + the ScrollTrigger sync + the complete cleanup, lib/gsap.ts with the plugins registered, the usePrefersReducedMotion hook, the layout.tsx updated.

## Step 1 — Inventory and assets
1. Go to https://www.brasal.com.br/instituto/ and extract the REAL content of the home page (verbatim texts, section order, menu items with URLs).
2. Download into ./images/: the logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), the institutional images and those of the 3 eixos, the SDGs (4-ods.jpg), the covers of the 5 reports, and ALL the institution and partner logos (brand-*.png, Logo-*.jpg). Generate the favicon from the logo.
3. Motion 5 (the hero background video): the institutional file has yet to be delivered. Implement the component ready for /hero.webm + /hero.mp4 per the guide, with an ACTIVE FALLBACK of an image with a slow zoom (Ken Burns, scale 1.0→1.06 in a smooth loop) using an institutional photo. Swapping to the video should demand adding the files to /public and nothing more.

## Step 2 — Build per section (the content of the current site + the motion from the guide)
Implement the home page in this section order, applying the indicated motion with the matching PROMPT from the guide, parameterized with the real content:

1. Header: logo + the current complete menu (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [Brasal Refrigerantes, Incorporações, Veículos, Combustíveis, Energia, Corretora, SIA Park Hotel] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato) → MOTION 1 (a fullscreen overlay with stagger; the dropdowns become groups inside the overlay) + MOTION 16 on the CTAs.
2. The cookie banner → MOTION 2, a component ready to go but DEACTIVATED by a flag; present me the LGPD text for approval before activating it.
3. The Edital 2026 — Programa Vamos Juntos hero (the current text + the CTA "Confira o Edital 2026 / Clique aqui") → MOTIONS 3+4+5 in a single timeline (4 replaces the tween of 3; the title animates ONCE) + the background per Step 1.3.
4. "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" (the current paragraph + the CTAs "Mais sobre o Instituto" and "Conheça o Programa") → MOTION 10 on the text blocks + MOTION 12 (multi-layer parallax) on the institutional photos.
5. Video: https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np → a lazy facade (thumbnail + play, the iframe on the click alone) with the standard 7/10 reveal on the frame.
6. EIXOS DE ATUAÇÃO (3 cards, the current texts, "Saiba+") → MOTION 7 (a cascade + hover zoom).
7. Impact numbers ("Desde a sua criação, geramos uma rede de impacto de"): Doamos +181.100 itens · Beneficiamos 434.100 pessoas · Instituições apoiadas + de 480 projetos · Regiões administrativas no DF, GO e MG → MOTION 9 (the counters). ATTENTION: the current home page carries two divergent counter blocks (65.100/269.100 vs 181.100/434.100); use the desktop values and report the divergence to me at the end.
8. TRANSPARÊNCIA (5 reports with links to the current PDFs) → MOTION 6 (a horizontal timeline 2021→2025 with Embla). If you judge MOTION 11 a better fit for the content, justify it and record the choice.
9. THE UN SDGs (the current text + 4 SDGs with descriptions) → MOTION 8 (a pinned section; each SDG is a step). Test the pin with Lenis carefully, per the guide.
10. INSTITUIÇÕES APOIADAS (~27 logos) → MOTION 7 in a grid with stagger.
11. PARCEIROS QUE SOMAM → MOTION 14 (an infinite marquee pausable on hover).
12. The MAP before the footer: a Google Maps iframe (q="SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011", output=embed, lazy) → the standard 10 reveal.
13. Footer (the current content: Institucional Brasal, (61)3462-8077, the address, institutomaisbrasal@brasal.com.br, Seg–Sex 08:00–18:00, socials, menu, copyright) → MOTION 16 on the links; MOTION 14 decorative only if the DESIGN.md allows it.
14. Global: MOTION 17 ADAPTED (with no i18n, the site is pt-BR only; implement the route transition fade alone, prepared for the future internal pages). MOTION 13 (a frame sequence) is OPTIONAL: if you identify a high-value application (an emblem in the impact section, for example), propose it to me before implementing; otherwise record "not applied" and the reason.

## Cross-cutting rules
- prefers-reduced-motion on EVERY motion (through the Prompt 0 hook), with a dignified static version.
- Animate transform/opacity alone (autoAlpha); no layout thrashing; 60fps on mobile (gsap.matchMedia to simplify animations on small screens).
- No invented content; a doubt about a text means asking me.
- Identity: any color, font or radius outside the DESIGN.md is a bug.

## Delivery and validation
- `npm run dev` with the home page complete and responsive (mobile-first).
- ./images/ organized; the DESIGN.md untouched (if you think it needs to evolve, propose the change rather than applying it).
- A CONFORMITY TABLE at the end: the guide's motion → the section where you applied it → status (implemented / adapted / not applied + reason).
- A list of every ScrollTrigger created (section → effect → cleanup ok).
- A report of the counter divergence.

1. /impeccable critique
   (apply EVERY correction before moving on)

2. "Check the home page against the videos in ./referencia/videos/: for each motion
   implemented, is the feel equivalent to the reference's (rhythm, easing,
   timeline overlap)? List the differences by severity and fix them."

3. /impeccable polish

4. "GSAP performance pass: cleanup of every ScrollTrigger and of Lenis
   (3 steps), gsap.matchMedia for mobile and reduced-motion,
   ScrollTrigger.refresh() after images and fonts load, will-change where
   needed alone, a test of the Motion 8 pin with Lenis. 60fps on mobile."

npx skills add vercel-labs/agent-skills
npx skills@latest add emilkowalski/skills
npx skills add 199-biotechnologies/motion-dev-animations-skill
npx skills add Leonxlnx/taste-skill

# (title) REDESIGN WITH A REFERENCE — INSTITUTO +BRASAL (HOME) — STACK E: CRAFT & FEEL

## The specific directive of this stack (insert it after the "Engine" block)
- Taste Skill dials: DESIGN_VARIANCE per the DESIGN.md (invent no identity), MOTION high, DENSITY per the DESIGN.md.
- On the Framer Motion parts (motions 1, 2, 15, 16), apply the production patterns of the motion.dev animations skill: springs with coherent physics, AnimatePresence with a correct exit, variants with stagger, reduced-motion.
- On EACH GSAP motion implemented, do a feel pass before calling it done: easing and duration judged by the criteria of the animation review skill (no default ease with no justification; timeline overlaps with purpose).
- Anti-clone: the feel follows the reference, the identity follows the DESIGN.md. If any component comes out visually identical to the reference site (beyond the motion grammar), differentiate it while keeping the same school.

1. "Review EVERY animation with the review skill: easing, duration, spring
   physics (motions 1/2/15/16), the overlaps of the GSAP timelines, scroll
   choreography. Compare it against the videos in ./referencia/videos/. List by
   severity and fix."

2. "Apply the Taste Skill anti-slop checklist to the whole home page. What
   looks generic, fix WITHIN the limits of the DESIGN.md (invent no
   new tokens)."

3. "Anti-clone check: list the elements visually identical to the reference
   site (beyond the motion grammar) and differentiate each one while keeping the
   same school of design."

4. "A final pass on micro-interactions: hover on buttons, cards, overlay menu
   items and footer links, all of it with spring physics, no linear CSS
   transition."

npx skills add vercel-labs/agent-skills
npx skills add kylezantos/design-motion-principles
npx skills add LottieFiles/motion-design-skill

Before writing any code, use the motion principles skill in
Create mode to generate the CHOREOGRAPHY PLAN of the home page, in MOTION-PLAN.md:

Inputs (read all of them):
- DESIGN.md (root): the identity and tokens. Non-negotiable.
- ./referencia/motions-guia.md: the 17 motions of the reference with technique and
  parameters. Non-negotiable.
- ./referencia/videos/: the reference's feel and rhythm.
- The motion → section map defined for this project:
  Header→1+16 · Cookies→2 (conditional) · Hero→3+4+5 · "Prazer, nós somos"→10+12 ·
  YouTube video→reveal 7/10 + a facade · Eixos→7 · Numbers→9 · Transparência→6 (or 11,
  with a justification) · SDGs→8 (4 steps) · Instituições→7 grid · Parceiros→14 ·
  Map→10 · Footer→16 (+14 optional) · Global→17 with no i18n; 13 optional.

The plan has to hold, per section: the narrative intent of the movement (what the
user should feel or understand), the guide's motion applied with the parameters
(duration, easing, stagger, trigger points), how the section connects to the
previous and the following one (transitions with no hard cut), and the behavior under
reduced-motion. Apply the 12 principles of the motion design skill when
justifying each decision. Finish with the global timeline of the scroll
(a map of pins, scrubs and reveals along the page).
Write no code yet.

# (title) REDESIGN WITH A REFERENCE — INSTITUTO +BRASAL (HOME) — STACK F: PRINCIPLES & CHOREOGRAPHY

## The specific directive of this stack (insert it after the "Engine" block)
- The MOTION-PLAN.md (root) is the approved choreography script: implement
  each section per the plan. A necessary divergence during the build means
  updating the MOTION-PLAN.md with the justification rather than improvising in silence.
- Each local movement decision has to be defensible by one of the 12
  principles of the motion design skill; movement with no narrative purpose
  gets in in no case.
- The transitions between sections are a first-class requirement: the page
  should read as a single piece rather than as 11 isolated animated blocks.

- The MOTION-PLAN.md updated to reflect what you actually implemented.

1. "Run the audit of the motion principles skill (Audit mode) on the home page,
   with the 3 lenses. Generate the report and fix the high and medium severity
   problems."

2. "Coherence check: walk the home page from the top to the footer and evaluate the
   SEAMS between sections (the hero→institutional transition, the way the SDG
   pin enters and leaves with Lenis, the rhythm between the counters and transparency). The
   page should look like a single choreography. Fix whatever clashes."

3. "Traceability: for each item in the MOTION-PLAN.md, point out where it sits
   implemented. An item with no implementation means implementing it or removing it from the plan
   with a justification. Update the conformity table."