13 · The Paper Tiger: a film's opening titles played as a website

A fictional 1962 film from a fictional studio, Meridian Pictures, whose website is its own title sequence. Cut-paper shapes and credits play for 86 seconds, then the page turns into a normal site with a synopsis, an end-credits crawl, a poster drawn on a canvas and a seat picker. The thing that makes people stop is the transport bar at the bottom: a real film-style scrubber with a feet-and-frames counter, so you can drag through the titles like an editor.

Inspiration

The look comes from Saul Bass and 1960s title design: cut paper, flat colour, angled condensed type, shapes that move like a stop-motion collage. The motion engine comes from a second reference list. Anime.js v4 runs everything: createTimeline with named labels for the eight acts, splitText for the title characters, svg.createDrawable for the chalk line skyline and figure, stagger with grid and from: 'center' for the 16 by 9 cell wall, and onScroll for one scroll-linked decoration. The per-letter title drop borrows the idea from Text Effects, though that site does it in pure CSS and this one does it with JavaScript.

Added on top: the transport bar with chapter marks and a draggable scrubber, a canvas poster that reuses the tiger triangles, a looping credits crawl, and a seat picker for a made-up cinema. None of the first-list tools (Magic UI, Aceternity, shader gradients) show up here, and that is the point: this site looks unlike the rest of the set.

Visual direction

• Palette: midnight blue #0f2740, ink #091a2c, mustard #e2b53a, chalk #f1ead8, orange #d9431f. No gradients, glow or glass.
• Fonts: Bebas Neue for display, Barlow Condensed for text, loaded from Google Fonts.
• Shapes: every shape is a polygon with jittered vertices from a seeded random, run through an feTurbulence plus feDisplacementMap filter so the edges look hand-cut.
• Motion: outBack for things entering, inExpo for things leaving, long holds on the title and final card, and acts that overlap slightly.
• The eight acts: a sun of eight wedges (Studio), angled bars with the dropping title and confetti (Title), four name bars sliding in from alternating sides (Starring), a tiger assembled from 14 triangles that then tears apart (Tiger), a chase of 14 circles, a chalk skyline drawn on (Skyline), a 144-cell wall filling from the centre with the director card (Director), and a ring-and-title final card (Fin).
• After the titles: chalk, mustard and orange sections with tilted headings, offset hard shadows, and an end-credits crawl that speeds up on hover.

References

• Anime.js v4, https://animejs.com: createTimeline with labels, splitText, svg.createDrawable, stagger with grid and from, onScroll. Imported from https://cdn.jsdelivr.net/npm/animejs@4.5.0/+esm.
• Text Effects, https://text-effects.colorion.co: the per-letter stagger idea for a hero title reveal (reimplemented with Anime.js, not pure CSS).
• Saul Bass and 1960s title design: the whole art direction, meaning flat cut shapes, angled type, limited palette, shapes that act as characters.

Why these choices

A timeline is the right tool because scrub, play, pause and chapter jumps all drive one object, so the transport bar is honest rather than decorative. Flat polygons and one displacement filter keep the file small, with no images at all. The poster reuses the tiger triangles so the page shares one hand.

Trade-offs, all visible in the code: the stage locks scrolling until the titles end or the visitor skips, so there is a Skip button and an Escape key. Reduced motion parks the sequence on the final card behind a "Play the titles" button. Sound is a synthesized brass stab that is off by default and never autoplays. The title falls back to hand-split letters if splitText is missing, and the skyline falls back to a fade if createDrawable is missing. The SVG uses slice framing, so on a phone the widest shapes are cropped at the edges, by design.

Who this kind of site is for

Film and festival microsites, event teasers, book launches, award ceremonies, anything with an opening-ceremony feel, and agencies that want to show choreography rather than a hero image. It also suits a heritage brand that can carry a mid-century look.

It is the wrong call for a site where people arrive to do a task fast: a clinic, a trades business, a shop. Eighty-six seconds before the content is a lot, even with a skip button.

How to make it

Stack and key techniques

• One HTML file, about 617 lines, no build step. Anime.js 4.5.0 from a CDN is the only library.
• Eight acts on one 86.1 second timeline, around 120 lines.
• Paper-cut helpers (cutRect, cutTri, cutCircle, wedge) with a seeded random, about 30 lines.
• Transport: pointer-captured drag seek, keyboard, chapter marks, feet and frames at 24 fps and 16 frames per foot.
• Crawl on requestAnimationFrame with hover speed-up; canvas poster with download via toBlob; seat picker with seeded taken seats and a demo confirmation; Web Audio brass sting.

The prompt

Build a single-file website, index.html, no build step, no images. The site is the opening title sequence of a fictional 1962 film, "The Paper Tiger", from a fictional studio, Meridian Pictures (director Augusto Ferrand). The titles play on arrival for about 86 seconds, then the page becomes a normal site.

Art direction: Saul Bass and 1960s title design. Palette only: midnight blue #0f2740, ink #091a2c, mustard #e2b53a, chalk #f1ead8, orange #d9431f. Bebas Neue for display, Barlow Condensed for text (Google Fonts). Flat colour only: no gradients, glow, glass or shadows except hard offset ones. Every shape is an SVG polygon with jittered vertices from a seeded random, passed through an feTurbulence plus feDisplacementMap filter so edges look hand-cut.

Motion: use Anime.js v4 from https://cdn.jsdelivr.net/npm/animejs@4.5.0/+esm. One createTimeline (autoplay off) with eight labelled acts: Studio (8 wedges forming a sun), Title (angled bars, title characters dropping in via splitText with outBack stagger, confetti triangles), Starring (four name bars sliding in from alternating sides), Tiger (a tiger built from about 14 cut triangles that fly in from scattered positions, bob, then tear apart), Chase (14 circles crossing the screen), Skyline (a chalk line skyline and figure drawn with svg.createDrawable), Director (a 16 by 9 cell wall filling from the centre with stagger grid, then a director card), Fin (ring and final title with a long hold). Use outBack for entrances, inExpo for exits, overlap the acts.

Transport bar at the bottom: play/pause, a draggable scrubber with pointer capture that seeks the same timeline, chapter marks that jump to acts, a feet-and-frames readout (24 fps, 16 frames per foot), arrow keys for 2 second steps, Space to toggle, Escape and a Skip button to leave. Scrolling is locked until the titles end or are skipped.

After the titles: synopsis section, an end-credits crawl on requestAnimationFrame that speeds up on hover or touch, a poster painted on a canvas using the same tiger triangles with font-aware caption fitting, a download button using toBlob, and a seat picker for a fictional cinema (seeded taken seats, showtimes, tally, a demo confirmation that says nothing is charged). Use onScroll for one scroll-linked decoration and fade-up reveals for sections. Add a Replay button and an optional synthesized brass sting that is off by default and never autoplays.

Constraints: prefers-reduced-motion parks the sequence on the final card with a Play button. Provide fallbacks if splitText or createDrawable are missing. No horizontal overflow at phone width. Zero em dashes in copy.

Verify: serve the file, take screenshots at 10 or more seek points on desktop and phone sizes and at several scroll stops after the titles. Check the console for errors. Test drag seek, keyboard, chapter jump, skip, replay and reduced motion. Fix anything cropped, overlapping or low contrast, and repeat.

Build notes

• A reduced-motion seek fired the sting callback before soundOn was declared, so the variable is now declared above the timeline.
• Open seats were first chalk on chalk and were recoloured mustard; the studio card overlapped the sun and the final title overran its ring, both fixed late.
• The builder says createDraggable is not used; the scrubber is plain pointer capture.
• Real-GPU smoothness and the brass sting sound were never checked, and the poster download was checked only by painting pixels.
• Code check: the caption-fitting loop in the poster originally had a regex typo (/d+px/ where /\d+px/ was meant) so the shrink step never fired; it was fixed after this review, so captions now shrink to fit.

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the table rests on the spec table, Anthropic's own claims and extrapolation from model tier.

Rough overall estimate, as a judgment call: Opus 5.5 about 80 to 90 percent of the visual impact in one pass, Sonnet 5.5 about 60 to 75 percent. The gap between Fable 5.1 and Opus 5.5 is probably small here, since this is mostly careful timeline bookkeeping. Sonnet's likely loss is the choreography polish and the Anime.js v4 API details. A screenshot loop at several seek points, plus a hint in the prompt that it is v4, would close most of it.