Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProRows of items scrolling across a tilted 3D plane, built with CSS transforms only.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Items to scroll; they are repeated to fill each row. |
rows | number | 3 | Number of rows. Alternate rows scroll the other way. |
duration | number | 40 | Seconds for one loop. |
gap | string | "1rem" | Gap between items. |
tilt | { x?: number; y?: number; z?: number } | { x: 20, y: -12, z: 8 } | Tilt of the plane in degrees. |
pauseOnHover | boolean | true | Pause while hovered. |
fade | boolean | true | Fade the edges into the background. |
repeat | number | 3 | Copies of the items per row for a seamless loop. |
className | string | - | Classes for the outer element. |
Only the first copy of the first row is exposed to assistive technology. The motion stops for prefers-reduced-motion: reduce. It uses the same animate-marquee keyframes as Marquee, which the CLI adds to your CSS.