Rolling Ring
ローリングリング
Words seated around a wheel that turns towards you as you scroll. Each item is rotated to its own place on the ring and pushed out by the radius; rotating the parent then carries the whole wheel past the viewer, so nothing has to be animated individually. Built with CSS 3D transforms↗↗, Framer Motion and Tailwind CSS.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion, useScroll, useTransform } from "framer-motion"
import { useRef } from "react"
type RollingRingProps = {
items: string[],
radius?: number,
turns?: number,
height?: number,
How to use it3
"use client"
import { RollingRing } from "@/components/ui/rolling-ring"
const items = ["Design", "Build", "Ship"]
export default function Page() {
return <RollingRing items={items} radius={130} turns={1} />
}
Props
RollingRing
| Name | Default | Description |
|---|---|---|
| items | — | string[] Words seated evenly around the ring |
| radius | 130 | number How far each item sits from the axis, in pixels |
| turns | 1 | number Full revolutions across the whole scroll |
| height | 420 | number Height of the scrollable viewport in pixels |
| dark | false | boolean Render the dark palette |