Cinema Ticket

A full cinema ticket whose stub tears off along the dotted line by drag or Enter, and whose printed face peels from the bottom-left corner to reveal the film trailer playing inside the ticket.

About this tool

A full cinema ticket on a dark navy stage. Drag down the dotted line with mouse or touch to tear off the stub, or focus the line and press Enter. Short tears heal; releases at 55% or beyond complete. Pull the bottom-left corner: a short pull springs back, and a long pull or click peels the printed face away to reveal the fictional Neon Harbor trailer playing inside the ticket. The trailer loads at the first lift, starts muted, and has play/pause, sound and cover-again controls. Escape covers it again; reset restores the ticket. Ticket text, paper colours and fitted size are editable. Reduced motion uses fades. Standalone HTML embeds the engine and demo media.

In collections: CSS Cards & Animated Card Components

Guide: CSS Cards: Build a Responsive, Accessible Card Component

UI/UX · HTML / CSS / JavaScript All tools

Ticket text

Film

Starts

Ends

Runtime

Hall

Seat

Date

Size

Ticket scale

Colours

Ticket top

Ticket bottom

Stub top

Stub bottom

Text

Secondary text

Accent