Beams, particles and motion

Beams of light, meteors, particles, orbits, endless marquees and a light that travels around a card border.

6 components · 18 variants

Switch category

Beams

Light that travels along grid lines, falls as rays or runs along curves.

Grid
Rays
Waves

Props and details

Grid

Pulses run along a fine grid in both directions and gather strength as the stage scrolls up.

Installv1.0.0

aiw add @ai-website/beams

Brings along utils, kit

Usage

<Beams variant="grid" cell={56} count={9} scrollReveal />

Source

Rays

Only vertical beams without a drawn grid, they gather strength with the scroll.

Installv1.0.0

aiw add @ai-website/beams

Brings along utils, kit

Usage

<Beams variant="rays" count={10} speed={6} scrollReveal />

Source

Waves

A fan of curves that meet behind the headline, light runs from left to right.

Installv1.0.0

aiw add @ai-website/beams

Brings along utils, kit

Usage

<Beams variant="waves" count={9} />

Source

border-beam

Border beam

A card whose border carries a travelling light, in three lengths and three speeds.

Announcement card
Sizes and speeds
Two lights

Props and details

Announcement card

One card, one light, the copy inside.

Installv1.0.0

aiw add @ai-website/border-beam

Brings along utils, kit

Usage

<BorderBeam className="p-10">…</BorderBeam>

Source

Sizes and speeds

Small and slow, medium and normal, large and fast, on three plans.

Installv1.0.0

aiw add @ai-website/border-beam

Brings along utils, kit

Usage

<BorderBeam size="sm|md|lg" speed="slow|normal|fast">…</BorderBeam>

Source

Two lights

Two lights on opposite sides of a wide card, counterclockwise.

Installv1.0.0

aiw add @ai-website/border-beam

Brings along utils, kit

Usage

<BorderBeam double reverse size="lg" speed={10}>…</BorderBeam>

Source

marquee

Marquee

An endless row or column of cards, logos or previews, never of bare words. Stops on hover and focus, drifts with the scroll if you like, still and scrollable with reduced motion.

Logo row
Two rows of cards
Vertical columns

Props and details

Logo row

Customer logos run under the copy, the edges fade.

Installv1.0.0

aiw add @ai-website/marquee

Brings along utils, kit

Usage

<Marquee label="Customer logos" speed={36}>{logos}</Marquee>

Source

Two rows of cards

Dish and drink cards in two rows that run in opposite directions and slide past each other while you scroll. Hover stops a row and lifts the card.

Installv1.0.0

aiw add @ai-website/marquee

Brings along utils, kit

Usage

<Marquee scrollShift={120}>{cards}</Marquee>  <Marquee reverse speed={26} scrollShift={-120}>{cards}</Marquee>

Source

Vertical columns

Reviews climb in two columns next to the copy, one of them reversed.

Installv1.0.0

aiw add @ai-website/marquee

Brings along utils, kit

Usage

<Marquee direction="vertical" className="h-[460px]">{cards}</Marquee>

Source

meteors

Meteors

Thin streaks that cross the stage on a slant, from seeded positions over a faint field of stars.

Shower
Calm sky
Steep

Props and details

Shower

Many streaks with an accent head, for a launch night.

Installv1.0.0

aiw add @ai-website/meteors

Brings along utils, kit

Usage

<Meteors count={16} parallax={40} />

Source

Calm sky

A few long, slow streaks in the text color, the stars drift like a far sky while you scroll.

Installv1.0.0

aiw add @ai-website/meteors

Brings along utils, kit

Usage

<Meteors count={7} speed={14} length={220} tone="neutral" stars={80} parallax={56} />

Source

Steep

Streaks fall almost straight down, the angle is free.

Installv1.0.0

aiw add @ai-website/meteors

Brings along utils, kit

Usage

<Meteors angle={110} count={10} speed={8} parallax={40} />

Source

orbit

Orbit

Icons, logos or avatars that circle a center on rings and stay upright while they turn.

Integrations
Halo behind the copy
People

Props and details

Integrations

Two rings turning in opposite directions around your mark, next to the copy. Scrolling gives them an extra turn.

Installv1.0.0

aiw add @ai-website/orbit

Brings along utils, kit

Usage

<Orbit scrollTurn={50} center={<AppMark />} rings={[{ radius: 24, items: […] }, { radius: 43, reverse: true, items: […] }]} />

Source

Halo behind the copy

Wide dashed rings around the headline, the items pass at the edges. On phones only the rings remain.

Installv1.0.0

aiw add @ai-website/orbit

Brings along utils, kit

Usage

<Orbit size={920} dashed rings={[{ radius: 33, … }, { radius: 46, … }]} className="absolute …" />

Source

People

Avatars on two rings above the copy, for a community or a team.

Installv1.0.0

aiw add @ai-website/orbit

Brings along utils, kit

Usage

<Orbit size={300} center={…} rings={[{ radius: 28, items: avatars }, …]} />

Source

particles

Particles

A canvas of slowly drifting particles with lines between near neighbours. Seeded, sharp on every screen and paused when nobody looks.

Network
Dust
Constellation

Props and details

Network

Particles in the accent color, linked when they come close. Larger ones drift further with the scroll.

Installv1.0.0

aiw add @ai-website/particles

Brings along utils, kit

Usage

<Particles density={1.1} linkDistance={120} parallax={48} />

Source

Dust

Fine grains in the text color without lines, like dust in a beam of light.

Installv1.0.0

aiw add @ai-website/particles

Brings along utils, kit

Usage

<Particles tone="neutral" density={1.7} linkDistance={0} sizes={[0.6, 1.6]} speed={0.5} parallax={40} />

Source

Constellation

Fewer, larger points with long links that also reach for the pointer.

Installv1.0.0

aiw add @ai-website/particles

Brings along utils, kit

Usage

<Particles density={0.6} linkDistance={170} sizes={[1.4, 2.8]} interactive parallax={64} />

Source

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Beams, particles and motion on a page.

On this page

Grid

Rays

Waves

Announcement card

Sizes and speeds

Two lights

Logo row

Two rows of cards

Vertical columns

Shower

Calm sky

Steep

Integrations

Halo behind the copy

People

Network

Dust

Constellation

Similar components, Often combined with

Similar components

Often combined with