webdevpuneet.com

Related Snippets

54 in Text Animations category
3–8 of 54

Perspective Crawl Credits

Redline Edit Replace

Marker Highlight Sweep

Circular Text Spin

Mouse-Tilt 3D Extruded Text

Blur Focus Pull

Perspective Crawl Credits — Receding 3D Scrolling Text

Perspective Crawl Credits · Text Animation · Plain HTML, CSS & JS · Live preview

CategoryText Animations
TagsText Effects3D EffectsCSS Animation

Copy & paste

Source Code

<main class="space">
  <div class="stars" aria-hidden="true"></div>
  <div class="fade" aria-hidden="true"></div>
  <div class="viewport">
    <section class="crawl" id="crawl" aria-label="Project credits">
      <p class="chapter">Chapter 7</p>
      <h1>THE LONG BUILD</h1>
      <p>It started as a weekend experiment: a handful of snippets, a stubborn idea, and no plan for what came next. Months later the library had grown into something people actually used.</p>
      <p>Along the way, a small group of designers, developers and testers turned rough drafts into components that behave on every screen, in every browser, and for every kind of reader.</p>
      <p>To everyone who filed a bug, suggested a fix, or simply left a kind word: this one is for you. The next release is already underway.</p>
      <p class="credit"><strong>Written by</strong> The Maintainers</p>
      <p class="credit"><strong>Tested on</strong> Far too many phones</p>
      <p class="credit"><strong>Special thanks</strong> Everyone who read the docs</p>
    </section>
  </div>
  <div class="controls">
    <button type="button" id="toggle" aria-pressed="false">Pause</button>
    <label>Speed
      <select id="speed" aria-label="Crawl speed">
        <option value="70">Slow</option>
        <option value="48" selected>Normal</option>
        <option value="30">Fast</option>
      </select>
    </label>
  </div>
</main>

Extend with AI

Take This Snippet Further With AI

Ask an AI coding assistant why perspective-origin is set to 50% 100% rather than the default centre, and why rotateX is written before translateY in the transform. It's also worth asking how to drive the crawl from scroll position instead of a timed animation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a perspective text crawl (opening-credits style) in plain HTML, CSS and a little JavaScript.

Requirements:
- A full-height dark scene with a CSS-only starfield made from layered radial-gradients, and a viewport element with perspective around 340px and perspective-origin 50% 100%.
- A block of bold yellow justified text (a chapter label, a centred title, three paragraphs and a few centred credit lines) positioned at the bottom, with transform-origin 50% 100%, rotated about 26 degrees on the X axis.
- A CSS keyframe animation that keeps the same rotateX and moves translateY from 100% to about -190% linearly and infinitely, so the text recedes and shrinks toward the vanishing point. Write rotateX before translateY in the transform.
- A gradient overlay across the top that fades the text into the background.
- Controls: a Pause/Play button using animationPlayState with aria-pressed, and a speed select (slow, normal, fast) that restarts the animation with a new duration, since editing the duration mid-run causes a jump.
- Under prefers-reduced-motion, replace the animation with a static, readable tilted block.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

What's included

Features

True 3D recession
Perspective plus rotateX shrinks text toward a vanishing point with no JavaScript maths.
Low perspective origin
A bottom-centre origin makes the text converge on the middle of the screen for the classic look.
Top fade-out
A gradient overlay dissolves the text as it shrinks, hiding the horizon edge.
Playback controls
Pause, play and three speeds are native buttons and a select, usable with a keyboard.
CSS-only starfield
Stars are layered radial-gradient dots, so there are no image requests.
Reduced-motion fallback
The crawl is replaced by a static tilted block that can be read at leisure.

About this UI Snippet

Perspective Crawl Credits — rotateX Tilt, Perspective Origin and a Fade Mask

Screenshot of the Perspective Crawl Credits snippet rendered live

Text that slants back and shrinks as it travels toward a vanishing point is one of cinema's most recognisable title treatments, and it's a pure CSS 3D transform. This snippet turns it into a credits roll: a block of yellow text is tilted away from the viewer and scrolls up, shrinking as it recedes, over a field of CSS-drawn stars.

Two properties create the depth

The wrapper has perspective: 340px and perspective-origin: 50% 100%. That low origin matters: it puts the vanishing point at the bottom centre, so the crawl converges on the middle of the screen rather than a point behind the text. The text itself is rotateX(26deg) and is animated only by translateY, from 100% below its box to 190% above, so everything the browser needs is a transform on one layer.

Why the order of transforms matters

rotateX comes first and the translateY after it, so the movement follows the tilted plane instead of the screen. Reverse them and the text slides straight up and tilts in place. transform-origin: 50% 100% anchors the tilt at the bottom edge so the text rotates away from the viewer's feet.

Fade, controls and reduced motion

A gradient overlay at the top fades the text to the page colour as it shrinks, so lines don't pop out at the horizon. The pause and speed controls are real buttons; changing speed restarts the animation because editing animation-duration mid-run causes a jump. Reduced-motion visitors get a static, readable tilted block instead of the scroll. The stars are a stack of radial-gradient layers, not images.

Step by step

How to Use

  1. 1
    Paste the three blocksA dark starfield appears and a yellow block titled "THE LONG BUILD" begins crawling up and away. Pause and speed controls sit at the bottom.
  2. 2
    Replace the contentEdit the heading and paragraphs inside #crawl. Use the .credit class for centred role-and-name lines at the end.
  3. 3
    Change the tiltThe 26deg in both the base style and the keyframes is the tilt. Smaller angles look flatter; bigger ones make the text shrink faster. Keep the two values identical.
  4. 4
    Set the lengthThe final translateY(-190%) decides how far the text travels. Longer content needs a larger negative value and a longer duration so the pace stays steady.
  5. 5
    Match your brandChange the text colour, the sky gradient, and the star positions in the radial-gradient stack. White text on a deep blue works as well as yellow.

Real-world uses

Common Use Cases

Project and film credits
End a case study, short film page or documentary with a credits roll that gets read.
Release notes and "story so far" intros
Introduce a game, product or season with a short cinematic recap.
Launch and event countdown pages
A crawl before the reveal builds anticipation on a teaser page.
Game start screens
Use it for lore or tutorial intros before the first level.
Thank-you and donor walls
Scroll supporters' names in a long list that doesn't need a scrollbar.

Got questions?

Frequently Asked Questions

3D-transformed text is rasterised, so very small text can shimmer. Use a heavier weight and a font size of at least 18px at the bottom, where the text is largest.

Change infinite to 1 and add animation-fill-mode: forwards so the last frame stays, or hide the container with a final keyframe.

Yes. The width uses min(560px, 86vw) and the font scales with clamp(). Reduce the tilt slightly on very narrow screens if the text gets too thin at the top.

You can drive translateY from scroll position with animation-timeline: scroll() in current browsers or a scroll listener elsewhere, keeping the same perspective and rotateX.