Back to site

Design System

Component reference for brunoesparza.dev. Live demos with actual components.

Notion renderers (blocks & rich text)

DsIconButton

An inline icon + label component. Pass href for a link or onClick for a button — TypeScript enforces you can only use one. Supports hover/focus icon animation, trailing comma, disabled state, custom className, and an optional ariaLabel override.

DsIconButton (href)

DsIconButton (onClick)

With animateIcon (hover or focus)

Github

With trailingComma (list style)

With ariaLabel override

GH

With className (text-primary)

Github

Disabled

Github

DsInfiniteLoop

Horizontal marquee built on GSAP. Each direct child is one slide in a flex row; no default gap—use `className` when you want spacing. A single React Fragment wrapping multiple nodes counts as one slide (class lands on the wrapper only); pass siblings directly when each node should be its own slide. `stripCopies` repeats the whole list in the DOM (default 3, min 1). `repeat`: `"infinite"` or omit for a continuous timeline, or a whole number of full cycles before stop. `speed` defaults to 1; use `reversed` or `paused` for direction or a frozen strip. Rebuilds automatically when the container resizes.

Item one
Item two
Item three
Item one
Item two
Item three
Item one
Item two
Item three

DsInfiniteLoopText

A single marquee item displaying a large uppercase label paired with an icon. Designed to be placed inside DsInfiniteLoop for continuous horizontal scrolling.

Inside DsInfiniteLoop

Creative Developer
Photographer
Designer
Creative Developer
Photographer
Designer
Creative Developer
Photographer
Designer