# Prompt example: fixing the intro animation

This excerpt shows how the vague "let's have an AI-style intro" idea became a concrete, testable Codex task.

```text
Build a real animated homepage intro for the existing blog.

Read the current homepage, CSS and JavaScript first. Do not create a separate fake animation mockup.

Requirements:

1. On first load, start from a blank dark screen.
2. Show one centered AI prompt box.
3. Type this prompt character by character:
   "build a fully functional blog page. Techy but not high tech. Not fancy. Simple blog functionality."
4. After typing, show visible progress states:
   - thinking
   - reading constraints
   - assembling layout
   - done
5. Reveal the real page elements in sequence:
   - header
   - hero
   - post feed heading
   - post cards
   - sidebar
   - footer
6. The animation must reveal the actual DOM elements that remain usable after the intro.
7. Do not leave fallback text visible.
8. Do not introduce React or any frontend framework.
9. Keep the style calm, dark, editorial and readable.
10. Add a way to replay the intro with `?intro=1`.

After implementation, verify in the browser that the page is usable after the overlay disappears.
```

## Why it helps

The early versions were not merely "not pretty enough". The problem was that the animation either did not build the real page, or a static fallback state remained visible.

This prompt asks for behavior, not vibes:

- what appears first;
- which states follow each other;
- which real DOM elements are revealed;
- what must not be introduced;
- how the result should be checked.