Components / KATAYABURI / Warp Tunnel

Warp Tunnel beta

Rings rushing out of the dark: a hyperspace tunnel in pure CSS, no script at all.

Preview 
<div class="k-warp" role="img" aria-label="Rings rushing toward the viewer through a dark tunnel">
  <div class="k-warp-in" aria-hidden="true">
    <span class="k-warp-r" style="animation-delay:0.00s"></span>
    <span class="k-warp-r" style="animation-delay:0.42s"></span>
    <span class="k-warp-r" style="animation-delay:0.84s"></span>
    <span class="k-warp-r" style="animation-delay:1.26s"></span>
    <span class="k-warp-r" style="animation-delay:1.68s"></span>
    <span class="k-warp-r" style="animation-delay:2.10s"></span>
    <span class="k-warp-r" style="animation-delay:2.52s"></span>
    <span class="k-warp-r" style="animation-delay:2.94s"></span>
    <span class="k-warp-r" style="animation-delay:3.36s"></span>
    <span class="k-warp-r" style="animation-delay:3.78s"></span>
    <span class="k-warp-r" style="animation-delay:4.20s"></span>
    <span class="k-warp-r" style="animation-delay:4.62s"></span>
  </div>
  <p>DEPLOY SPEED</p>
</div>
/* KATA Warp Tunnel — KATAYABURI. Twelve rings, zero script. */
.k-warp{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;height:250px;perspective:340px;font-family:var(--k-font)}
.k-warp-in{position:absolute;inset:0;transform-style:preserve-3d}
.k-warp-r{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border:2px solid var(--k-zinc-700);border-radius:50%;opacity:0;animation:k-warp-fly 5s linear infinite}
.k-warp-r:nth-child(3n){border-color:var(--k-accent)}
@keyframes k-warp-fly{0%{transform:translateZ(-320px);opacity:0}18%{opacity:.9}100%{transform:translateZ(190px);opacity:0}}
.k-warp p{position:relative;z-index:2;text-align:center;padding-top:106px;font-size:14px;font-weight:600;color:var(--k-on-color);letter-spacing:.14em}
@media (prefers-reduced-motion:reduce){.k-warp-r{animation:none;opacity:.25}.k-warp-r:nth-child(odd){display:none}}

Installation

CLI

node kata-ui.mjs add warp-tunnel

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

Twelve rings, one keyframe, staggered delays — the cheapest speed in the catalog. Drop it behind a launch headline when the message is "fast" and the meeting is short. It is the only KATAYABURI part with no JavaScript, which the shelf finds hilarious.

Accessibility

Decoration with a strong motion signature: under prefers-reduced-motion the rings freeze into a target — still pretty, entirely honest. Never put the only copy of a message inside the tunnel; text rides above it or not at all.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-warpclass
.k-warp-inclass
.k-warp-rclass
aria-labelARIA
aria-hiddenARIA

Related parts

Bounce Letters beta

A headline whose letters hop when touched — and do the wave when you click.

lettersbouncetextheadlineplayful

Carousel Ring beta

A merry-go-round of cards in real 3D: eight panels riding a ring that never stops turning.

carousel3dringcardsrotate

Confetti Cannon beta

A button that fires confetti out of both corners of its stage. You already pressed it twice.

confetticelebrationcanvasbuttonparty

Fireworks beta

Click the night and it blooms: rockets, bursts and falling sparks on one canvas.

fireworkscanvascelebrationnightinteractive
Previous
Particle Word