Marquee 3D
pura-marquee-3d arranges the slotted items into multiple vertical marquee columns laid on a statically tilted 3D plane (rotateX/rotateZ inside a perspective scene), the composition used in testimonial heroes and logo galleries that the flat pura-marquee cannot do. Items distribute round-robin into columns; each column loops with a pure CSS @keyframes animation, adjacent columns scroll in alternating directions and durations stagger deterministically by index. Before JS runs the items paint as a static multi-column layout on the same tilted plane, so the SSR frame is fully presentable. The animated columns are aria-hidden clones while the original content stays in the accessibility tree, and prefers-reduced-motion stops the loop entirely. Theme with --pura-marquee-3d-perspective, --pura-marquee-3d-gap, --pura-marquee-3d-scale and friends. Agent-native: data-pura-m3d-* attributes mirror live state and each instance registers in window.__puraMarquee3ds by data-pura-id.
Preview
<!-- testimonial hero: four tilted columns of cards behind the headline -->
<pura-marquee-3d columns="4" speed="30" rotate-x="55" rotate-z="-45" label="Customer testimonials" style="height: 70vh;">
<blockquote class="card">Shipped in a weekend. Unreal.</blockquote>
<blockquote class="card">Zero build step is the killer feature.</blockquote>
<blockquote class="card">Our agents finally read the UI.</blockquote>
<blockquote class="card">Theming took one CSS file.</blockquote>
<blockquote class="card">SSR worked on the first try.</blockquote>
<blockquote class="card">The parts API is a gift.</blockquote>
<blockquote class="card">Best logo wall we ever had.</blockquote>
<blockquote class="card">Five stars from the whole team.</blockquote>
</pura-marquee-3d>
<!-- gentler tilt for a logo gallery, pausing on hover -->
<pura-marquee-3d columns="3" speed="18" rotate-x="35" rotate-z="-20" pause-on-hover label="Partner logos"
style="height: 420px; --pura-marquee-3d-gap: 2rem; --pura-marquee-3d-perspective: 1600px;">
<img src="/logos/acme.svg" alt="Acme" />
<img src="/logos/globex.svg" alt="Globex" />
<img src="/logos/initech.svg" alt="Initech" />
<img src="/logos/umbrella.svg" alt="Umbrella" />
<img src="/logos/soylent.svg" alt="Soylent" />
<img src="/logos/stark.svg" alt="Stark Industries" />
</pura-marquee-3d>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
columns | number | 3 | Number of vertical columns, 1..8. Slotted items distribute round-robin. |
speed | number | 25 | Seconds for one full column loop. Lower = faster; per-column durations stagger deterministically by index. |
rotate-x | number | 55 | Plane tilt around the X axis, in degrees. |
rotate-z | number | -45 | Plane rotation around the Z axis, in degrees. |
pause-on-hover | boolean | false | When present, pauses while under the mouse or with internal focus. |
paused | boolean | false | Reflected state; present when the animation is stopped. |
label | string | Scrolling gallery | aria-label text applied to the role=marquee container. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/marquee-3d.js"></script>import "./pura/lib/marquee-3d.js";