# End card and outro animations in HTML

> End card, logo sting and outro animations in HTML and CSS: a mark lands, a name settles and a call to action closes the film.

Canonical: https://vawe.dev/video-components/group/end-a-film
Last updated: 2026-11-03

These 10 components close a film: a logo hit, a wordmark that falls into place, a mark that draws itself, a quiet lockup, a thank-you sweep and the call to action.

Six of them carry the same note: use once per film. An ending that repeats an earlier gesture feels like a template, so each one is built to be the single closing beat.

10 components, 10 with a clip.

## Pick by how the film should feel when it stops

| Component | Use it when |
| --- | --- |
| [Logo sting](https://vawe.dev/video-components/logo-sting) | A short logo hit: the mark lands and a light band crosses it. |
| [Wordmark cascade](https://vawe.dev/video-components/wordmark-cascade) | The name is the last beat, falling onto a rail. |
| [Mark trace](https://vawe.dev/video-components/mark-trace) | A line mark should draw itself. |
| [Calm lockup](https://vawe.dev/video-components/calm-lockup) | A quiet ending where the logo and line settle slowly. |
| [UI strip away](https://vawe.dev/video-components/ui-strip-away) | The product UI peels away and its mark becomes the brand lockup. |
| [Logo wall](https://vawe.dev/video-components/logo-wall) | A proof beat before the call to action. |
| [CTA morph press](https://vawe.dev/video-components/cta-morph-press) | The close moves from brand to action, and a button gets pressed. |

## All 10 components in end a film

- [Logo sting](https://vawe.dev/video-components/logo-sting): a short logo hit: the mark lands, one light band crosses it, the word opens from behind it, a slow push runs to the last frame; use once per film
- [Wordmark cascade](https://vawe.dev/video-components/wordmark-cascade): the name is the last beat: letters fall onto a rail with shrinking gaps, the full stop lands last, an accent bar runs the rail; use once per film
- [Mark trace](https://vawe.dev/video-components/mark-trace): a line mark draws itself with a riding tip, thickens to its final weight, then an accent bar runs the finished mark; use once per film
- [Shape trace morph](https://vawe.dev/video-components/shape-trace-morph): a brand mark is built like a shape layer: an outline draws on, fills as it closes, then morphs into the real mark on one spring; both paths keep the same command count; use once per film
- [Calm lockup](https://vawe.dev/video-components/calm-lockup): the quiet ending: logo and line settle slowly while two lights drift behind and the lockup floats; use once per film
- [CTA pop](https://vawe.dev/video-components/cta-pop): the call to action pops in under its line on the overshoot curve, the one accent, and the arrow leans to invite the click
- [Thanks sweep](https://vawe.dev/video-components/thanks-sweep): a closing line sweeps in on a soft mask edge with an accent bar riding the edge, then drifts; use once per film
- [UI strip away](https://vawe.dev/video-components/ui-strip-away): the last beat hands the product to the brand: the UI leaves layer by layer, top layer first, while the sidebar mark travels to the middle and becomes the lockup
- [Logo wall](https://vawe.dev/video-components/logo-wall): the proof beat before the call to action: three lanes of hairline cells with invented logos slide in from alternate sides on a stagger, blurred to their speed, and keep drifting after they land
- [CTA morph press](https://vawe.dev/video-components/cta-morph-press): the close moves from brand to action: one plate changes shape into a button on one spring, a cursor arrives on a bowed path and presses, and the button shows a confirmed state

## Rules that come with this group

- logo-sting, wordmark-cascade, mark-trace, shape-trace-morph, calm-lockup and thanks-sweep are each marked use once per film.
- shape-trace-morph morphs between two paths that keep the same command count.
- cta-pop uses the one accent colour on the overshoot curve, and the arrow leans to invite the click.

## More video components

- [Reveal a title](https://vawe.dev/video-components/group/reveal-a-title)
- [Change between shots](https://vawe.dev/video-components/group/change-between-shots)
- [Point the eye](https://vawe.dev/video-components/group/point-the-eye)
- [Move the camera](https://vawe.dev/video-components/group/move-the-camera)
- [Product moments](https://vawe.dev/video-components/group/product-moments)
- [Grounds](https://vawe.dev/video-components/group/grounds)

## Related

- [The logo sting guide](https://vawe.dev/docs/logo-sting)
- [A launch film built from video components](https://vawe.dev/launch-video)
- [The launch video guide](https://vawe.dev/docs/launch-video)
- [All 130 video components](https://vawe.dev/video-components)