Placeholder — Spinning Snitch

A minimal CSS keyframe spinner used to prove the grid + raw viewer render end-to-end. Replaced by the first real recorded animation once Plan B ships.

beginner < 1 min

A spinning gold snitch — scaffolding proof, not a real lesson.

Why this matters Every animation here respects reduced motion. This is the baseline.

What you'll learn

  • How @keyframes + animation-* properties compose into a single motion
  • Why @media (prefers-reduced-motion: reduce) is the bare-minimum a11y stance

Techniques used

Bản ghi phiên dựng

Đây là toàn bộ phiên Claude Code dựng animation này.

Mỗi tool call, mỗi prompt, mỗi chỉnh sửa — được ghi lại. Bấm ▶ hoặc Space để xem nó tự tái dựng. Kéo thanh thời gian để nhảy đến bất kỳ khoảnh khắc nào. Khung Live Render sẽ cập nhật theo.

Nhật ký dựng

Toàn bộ phiên Claude Code. Dùng ← → hoặc click chapter để di chuyển.

  1. #0 prompt · Build a simple spinning snitch animation for the Quidditch p… 
    {
  "cursor": 0,
  "ts": "2026-04-16T09:00:00Z",
  "kind": "prompt",
  "content": "Build a simple spinning snitch animation for the Quidditch playground placeholder."
}
  2. #1 Read · src/animations/placeholder/index.astro 
    {
  "cursor": 1,
  "ts": "2026-04-16T09:00:12Z",
  "kind": "tool",
  "tool": "Read",
  "input": {
    "file_path": "src/animations/placeholder/index.astro"
  },
  "output": {
    "status": "not_found"
  }
}
  3. ▸ v1 static snitch
    #2 Write · src/animations/placeholder/index.astro 
    {
  "cursor": 2,
  "ts": "2026-04-16T09:00:20Z",
  "kind": "tool",
  "tool": "Write",
  "input": {
    "file_path": "src/animations/placeholder/index.astro",
    "content": "<div class=\"snitch-stage\">...</div>"
  },
  "output": {
    "status": "ok",
    "bytes": 420
  }
}
  4. #3 assistant · Initial static snitch rendered. Adding orbit animation next. 
    {
  "cursor": 3,
  "ts": "2026-04-16T09:00:28Z",
  "kind": "assistant",
  "content": "Initial static snitch rendered. Adding orbit animation next."
}
  5. ▸ v2 basic orbit
    #4 Edit · src/animations/placeholder/index.astro 
    {
  "cursor": 4,
  "ts": "2026-04-16T09:00:40Z",
  "kind": "tool",
  "tool": "Edit",
  "input": {
    "file_path": "src/animations/placeholder/index.astro",
    "old_string": ".snitch { }",
    "new_string": ".snitch { animation: orbit 3.2s linear infinite; }"
  },
  "output": {
    "status": "ok"
  }
}
  6. #5 prompt · The easing is too mechanical. Use a natural-feeling ease. 
    {
  "cursor": 5,
  "ts": "2026-04-16T09:00:55Z",
  "kind": "prompt",
  "content": "The easing is too mechanical. Use a natural-feeling ease."
}
  7. ▸ v3 natural easing
    #6 Edit · src/animations/placeholder/index.astro 
    {
  "cursor": 6,
  "ts": "2026-04-16T09:01:02Z",
  "kind": "tool",
  "tool": "Edit",
  "input": {
    "file_path": "src/animations/placeholder/index.astro",
    "old_string": "animation: orbit 3.2s linear",
    "new_string": "animation: orbit 3.2s cubic-bezier(0.45, 0, 0.55, 1)"
  },
  "output": {
    "status": "ok"
  }
}
  8. ▸ v4 flapping wings
    #7 Edit · src/animations/placeholder/index.astro 
    {
  "cursor": 7,
  "ts": "2026-04-16T09:01:15Z",
  "kind": "tool",
  "tool": "Edit",
  "input": {
    "file_path": "src/animations/placeholder/index.astro",
    "old_string": "/* no wings */",
    "new_string": ".wing { animation: flap 0.18s ease-in-out infinite alternate; }"
  },
  "output": {
    "status": "ok"
  }
}
  9. #8 assistant · Wings added. Final polish: prefers-reduced-motion fallback. 
    {
  "cursor": 8,
  "ts": "2026-04-16T09:01:30Z",
  "kind": "assistant",
  "content": "Wings added. Final polish: prefers-reduced-motion fallback."
}
  10. ▸ v5 a11y polish
    #9 Edit · src/animations/placeholder/index.astro 
    {
  "cursor": 9,
  "ts": "2026-04-16T09:01:38Z",
  "kind": "tool",
  "tool": "Edit",
  "input": {
    "file_path": "src/animations/placeholder/index.astro",
    "old_string": "/* motion */",
    "new_string": "@media (prefers-reduced-motion: reduce) { .snitch, .wing { animation: none; } }"
  },
  "output": {
    "status": "ok"
  }
}

Live render

No source history available for this session.

This session's build predates the source-history pipeline (or the transcript touched no files under src/animations/placeholder/). Once a new session is published, the live render will appear here.

Practice Try it yourself

Edit the code on the left, see the result on the right. Your edits are scratch-only — reload resets to the last saved version. Auto-runs when you pause typing; hit Cmd+Enter (or the Run button) to force it.

No source history yet — practice pad loads once this animation has a published recording with source-history captured.
Phù phép bởi CC