Film Credits Roll
Two columns of roles and names roll upward through a faded window, like the end credits of a film. The list is duplicated and moved by exactly half its height, so the loop has no seam.
Also known as: end credits animation css, scrolling credits text, movie credits scroll.
- Directed by
- Mara Quinn
- Written by
- Ines Okafor
- Music by
- Kenji Arata
- Edited by
- Sol Duarte
- Camera
- Lea Brandt
- Produced by
- Theo Lindqvist
HTML
<div class="txt-film-credits-roll">
<div class="txt-film-credits-roll-track">
<dl class="txt-film-credits-roll-list"><dt>Directed by</dt><dd>Mara Quinn</dd><dt>Written by</dt><dd>Ines Okafor</dd><dt>Music by</dt><dd>Kenji Arata</dd><dt>Edited by</dt><dd>Sol Duarte</dd><dt>Camera</dt><dd>Lea Brandt</dd><dt>Produced by</dt><dd>Theo Lindqvist</dd></dl>
<dl class="txt-film-credits-roll-list" aria-hidden="true"><dt>Directed by</dt><dd>Mara Quinn</dd><dt>Written by</dt><dd>Ines Okafor</dd><dt>Music by</dt><dd>Kenji Arata</dd><dt>Edited by</dt><dd>Sol Duarte</dd><dt>Camera</dt><dd>Lea Brandt</dd><dt>Produced by</dt><dd>Theo Lindqvist</dd></dl>
</div>
</div>CSS
.txt-film-credits-roll {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
width: 12em;
height: 4.6em;
overflow: hidden;
color: var(--c);
-webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);}
.txt-film-credits-roll-track {
animation: txt-film-credits-roll-roll 12s linear infinite;
}
.txt-film-credits-roll-list {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: baseline;
column-gap: 0.8em;
row-gap: 0.45em;
margin: 0;
padding-bottom: 0.45em; /* same as row-gap, so both copies space evenly */
font-size: 0.62em;
}
.txt-film-credits-roll-list dt {
font-size: 0.72em;
font-weight: 500;
letter-spacing: 0.14em;
text-align: right;
text-transform: uppercase;
color: color-mix(in srgb, var(--c) 65%, transparent);
}
.txt-film-credits-roll-list dd {
margin: 0;
}
@keyframes txt-film-credits-roll-roll {
to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.txt-film-credits-roll, .txt-film-credits-roll *, .txt-film-credits-roll::before, .txt-film-credits-roll::after, .txt-film-credits-roll *::before, .txt-film-credits-roll *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.