End card and outro animations in HTML.

Pick by how the film should feel when it stops.

All 10 components in end a film

• 011.8 s

  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

  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

• 021.9 s

  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

  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

• 032 s

  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

  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

• 043.2 s

  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

  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

• 055 s

  the quiet ending: logo and line settle slowly while two lights drift behind and the lockup floats; use once per film

  Calm lockup

  the quiet ending: logo and line settle slowly while two lights drift behind and the lockup floats; use once per film

• 061.8 s

  the call to action pops in under its line on the overshoot curve, the one accent, and the arrow leans to invite the click

  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

• 071.8 s

  a closing line sweeps in on a soft mask edge with an accent bar riding the edge, then drifts; use once per film

  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

• 082 s

  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

  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

• 094 s

  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

  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

• 105.5 s

  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

  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
• Change between shots
• Point the eye
• Move the camera
• Product moments
• Grounds