# Title Sequence 3d

Make a cinematic 3D title sequence (8-15 seconds) in code with Claude Code and Three.js.

- Repository: https://github.com/charlie947/motion-graphics-skills (519 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-10-11
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add charlie947/motion-graphics-skills --skill title-sequence-3d -g -a claude-code -y`
Codex: `npx skills add charlie947/motion-graphics-skills --skill title-sequence-3d -g -a codex -y`
Cursor: `npx skills add charlie947/motion-graphics-skills --skill title-sequence-3d -g -a cursor -y`
Gemini CLI: `npx skills add charlie947/motion-graphics-skills --skill title-sequence-3d -g -a gemini-cli -y`

## Description

Make a cinematic 3D title sequence (8-15 seconds) in code with Claude Code and Three.js. A camera moves through a lit scene, such as a rainy street at night with brand names as neon signs, then a big question or title lands. Use when someone wants a scroll-stopping opener, a film-style intro, "3D intro", "cinematic opening", "title sequence" or a hook for a video, reel or newsletter.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 3D title sequence, built in code

The first 3 seconds decide whether anyone watches. This skill builds a short cinematic opener: a camera moving through a lit 3D scene, ending on your question or title.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## Step 1: Ask for four things, then wait

1. **The line** that lands at the end. Example: "Why does every brand logo look the same now?"
2. **The world.** One setting that fits the story: a night street, an empty office, a desk at 5am, a stage. Default: rainy street at night.
3. **The objects in it.** Real names or logos as signs, screens or posters. Logo files attached, never redrawn from memory.
4. **Brand and size.** One accent colour for the key word. 1920 x 1080 or 1080 x 1920.

## Review rules (from the rounds that got rejected)

- **Sound is not optional.** A silent explainer feels unfinished. Write a score in code: a low bed, a hit on each new shot, a lift on the last line.
- **Cards and images, not lines.** A single bar or line moving across the screen reads as static. Every shot uses cards, real images or objects that move in depth.
- **Logos fill their card** and come from the real files. A logo floating small in a big box looks wrong.
- **Keep grids symmetrical.** Equal card sizes, equal gaps. A lopsided layout reads as a mistake.
- **Stunning or it's not done.** If the first 3 seconds would not stop your own thumb, rebuild them before building the rest.

## Step 2: Build brief (paste into Claude Code)

```
Build one self-contained HTML file called index.html: a [SECONDS]-second cinematic 3D title sequence at [WIDTH] x [HEIGHT], using Three.js from a pinned version and only the files I attached.

The rest: https://github.com/charlie947/motion-graphics-skills/blob/HEAD/skills/title-sequence-3d/SKILL.md