Components

Word-by-word or character-by-character staggered text reveal.

Character-by-character text reveal with spring-animated masking.

Custom branded cursor replacement with smooth trailing motion.

DealDash's flagship button — Linear-style 36px control, tokenized elevation, brand glow on hover, 1px press sink. Six variants, six sizes.

Click-to-toggle disclosure with smooth height animation.

Semantic figure with image + caption + optional click-to-expand lightbox.

Multi-image hero arrangement — grid or asymmetric collage with entrance reveal.

Button with cursor-proximity magnetic pull for subtle attention in primary CTAs.

Image that translates at a fraction of the scroll speed for depth.

Case-study card with hover-state image reveal — image, title, description, tag chips.

Horizontally-scrolling marquee for announcements, brand ribbons, or feature tickers.

Thin top/bottom bar tracking scroll position as percentage of page height.

DealDash's signature CTA effect — a comet of light orbiting the button edge. Pure CSS, GPU-cheap, one per view, reduced-motion safe.

Scroll-pinned stack of cards that layer on top of each other as the user scrolls.

DealDash's sanctioned soft status chip — 10% tint fill, full-strength text, 20% border, mapped to exactly four semantic tokens.

Editorial typographic intro that reveals from a full-block mask wiping in one of four directions.

Card with 3D perspective tilt that follows the cursor.

Horizontal scrolling ticker of tools, technologies, or skills.

The seven DealDash t-* typography roles — one named Inter scale with display optical sizing and Linear-tight tracking. Never hand-roll a title.