Anamorphic Lens Flare Text: CSS Text Animation

Anamorphic Lens Flare Text

A thin blue anamorphic flare streaks across a widescreen title card and the tracked-out letters catch the light as it passes. The streak and the text shine share one timing, so they stay in sync.

Also known as: lens flare text css, movie trailer text animation, anamorphic text, cinematic title animation.

Horizon

Color Font size 40px Dark background

HTML

<div class="txt-anamorphic-flare-text"><span>Horizon</span><i aria-hidden="true"></i></div>

CSS

.txt-anamorphic-flare-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 1.25em 1.6em;
  overflow: hidden;
  border-radius: 0.45em;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(80% 60% at 50% 50%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%),
    #05070c;
  box-shadow: 0 0.5em 1.2em -0.5em rgba(0, 0, 0, 0.55);}
.txt-anamorphic-flare-text span {
  font-size: 1.3em;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg,
      #aab4c8 42%, #fff 47%, color-mix(in srgb, var(--c) 50%, #fff) 50%, #fff 53%, #aab4c8 58%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: txt-anamorphic-flare-text-catch 5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
/* the streak: a hairline with a glow and a bright oval core */
.txt-anamorphic-flare-text i {
  position: absolute;
  left: -20%;
  top: 50%;
  width: 140%;
  height: 0.05em;
  margin-top: -0.025em;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, #8fd0ff) 25%, #fff 50%, color-mix(in srgb, var(--c) 70%, #8fd0ff) 75%, transparent);
  box-shadow: 0 0 0.35em 0.04em color-mix(in srgb, var(--c) 70%, #8fd0ff);
  mix-blend-mode: screen;
  opacity: 0;
  animation: txt-anamorphic-flare-text-streak 5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.txt-anamorphic-flare-text i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6em;
  height: 0.5em;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--c) 60%, #8fd0ff) 45%, transparent);
}
@keyframes txt-anamorphic-flare-text-streak {
  0%        { translate: -60% 0; opacity: 0; }
  12%       { opacity: 1; }
  50%       { opacity: 1; }
  62%, 100% { translate: 60% 0; opacity: 0; }
}
@keyframes txt-anamorphic-flare-text-catch {
  0%        { background-position: 100% 0; }
  62%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .txt-anamorphic-flare-text span, .txt-anamorphic-flare-text i { animation: none; }
  .txt-anamorphic-flare-text i { opacity: 0.8; }
  .txt-anamorphic-flare-text span { background-position: 50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-anamorphic-flare-text, .txt-anamorphic-flare-text *, .txt-anamorphic-flare-text::before, .txt-anamorphic-flare-text::after, .txt-anamorphic-flare-text *::before, .txt-anamorphic-flare-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. 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.

Anamorphic Lens Flare Text

HTML

CSS

Customizing this snippet

Similar text animations