An infinitely scrolling strip of content, and an animated perspective grid backdrop.
Ports the Pines marquee and retro grid.
<.marquee>
<img :for={logo <- @logos} src={logo} class="h-8" alt="" />
</.marquee>Both rely on keyframes shipped in priv/static/pine_ui.css, so nothing needs adding to
tailwind.config.js — which also means they work identically under Tailwind v3 and v4.
Summary
Animation
Renders a scrolling marquee.
Renders an animated perspective grid, for use as a decorative page backdrop.
Animation
Renders a scrolling marquee.
How the seamless loop works
The content is rendered twice and the track translates by exactly one copy's width. As the
first copy leaves the viewport the second is precisely where the first began, so the
wrap-around is invisible. The duplicate is aria-hidden, so assistive technology reads the
content once.
Honours prefers-reduced-motion: the animation is disabled and the content sits still.
Attributes
duration(:string) - Time for one full pass. Set per instance via the--pine-marquee-durationvariable. Defaults to"40s".direction(:string) - Defaults to"left". Must be one of"left", or"right".vertical(:boolean) - Defaults tofalse.pause_on_hover(:boolean) - Defaults totrue.fade_edges(:boolean) - Softens the entry and exit edges with a mask. Defaults totrue.gap(:string) - Defaults to"gap-8".class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Renders an animated perspective grid, for use as a decorative page backdrop.
Purely decorative, so the whole thing is aria-hidden and pointer-events are off — it
should never intercept a click meant for the content above it.
Attributes
angle(:integer) - Perspective tilt, in degrees. Defaults to65.duration(:string) - Defaults to"15s".cell_size(:string) - Defaults to"60px".class(:string) - Defaults tonil.- Global attributes are accepted.