Circular Progress
A play/pause button ringed by a GSAP-animated circular progress indicator, sized for carousel autoplay controls.
CircularProgress renders a circular play/pause control with an SVG ring that fills over a given duration. It is the autoplay control used by the media and featured-work carousels, but works standalone for any timed/looping action.
Installation
npx shadcn@latest add @adv/circular-progressUsage
import { CircularProgress } from '@/components/mediaCarousel/circular-progress';
const [isPlaying, setIsPlaying] = useState(true);
<CircularProgress
isPlaying={isPlaying}
showProgress={isPlaying}
duration={4}
onToggle={() => setIsPlaying((p) => !p)}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
isPlaying | boolean | — | Whether autoplay is active; toggles the play/pause icon. |
onToggle | () => void | — | Called when the button is clicked. |
showProgress | boolean | — | Whether the progress ring is visible and animating. |
duration | number | — | Length of one full ring sweep, in seconds. |
className | string | "" | Additional CSS classes on the outer wrapper. |
Featured Work Carousel
A full-width, accessible carousel that showcases featured work — one slide per item with a lazy-loaded hero image, year/company overlays, title/role/description and a "View case study" link.
Lazy Load Image
A carousel slide that lazily swaps in its image only when in view, with a spinner placeholder, hover overlay and category badge.