@dalydigital/blocks

GSAP animation blocks for React + Tailwind CSS 4 projects. Self-contained components — import, pass props, done. All animation is wired internally.

Install

npm install @dalydigital/blocks

Peer dependencies (must be installed in your project):

npm install gsap react react-dom

Usage

import { FadeUp, CTABanner, TestimonialStack } from '@dalydigital/blocks'

// All blocks accept colour props so they adapt to any design system
<FadeUp delay={0.1}>
  <h2>Your content here</h2>
</FadeUp>

<CTABanner
  headline="Your website should be working harder than you are."
  subline="We build fast, custom sites for Australian small businesses."
  buttonLabel="Get a free site scan"
  href="/contact"
  accent="#8ee6ca"
  bg="#080808"
/>

Block catalogue

Heroes

| Block | Description | |---|---| | HeroSplitText | Char-by-char headline reveal on mount using GSAP SplitText | | HeroParallax | Full-bleed image hero, background moves at 30% scroll speed | | HeroRevealMask | Accent curtain wipes upward on load, revealing clipped headline lines | | HeroScramble | Headline words scramble through random chars before resolving | | HeroMagnetic | CTA button follows cursor and springs back on leave | | HeroKinetic | Single word cycles through a list with a clip reveal | | HeroCinematic | Fullscreen image with slow Ken Burns zoom |

Headers & Nav

| Block | Description | |---|---| | NavStickyFade | Transparent on load, fades to solid after scrolling past hero | | NavSlideIn | Full-screen menu slides in from right with staggered link reveals | | NavMorphingLogo | Logo shrinks and repositions as you scroll |

Reveals

| Block | Description | |---|---| | FadeUp | Scroll-reveal wrapper, use delay to stagger siblings | | FadeInSplit | Lines of text slide up from clip mask on scroll | | CountUp | Number counts from zero when it enters the viewport | | ImageWipe | Solid block wipes away to reveal image on scroll |

Sections

| Block | Description | |---|---| | StickyFeature | Left copy pins while right column scrolls through features | | HorizontalScroll | Cards scroll horizontally, scrubbed to vertical scroll | | Marquee | Infinite scrolling ticker, pauses on hover, reverses on click | | BentoGrid | Asymmetric feature grid, cells animate in with stagger |

Galleries

| Block | Description | |---|---| | MasonryReveal | Masonry image grid, each image fades in on scroll | | LightboxGallery | Thumbnails expand into fullscreen lightbox | | ScrollStack | Images stack and peel away as you scroll |

FAQ & Accordion

| Block | Description | |---|---| | FAQSlide | Answers slide open with height tween, one open at a time | | FAQStagger | Items stagger in on scroll, each expands independently |

Footers

| Block | Description | |---|---| | FooterRevealUp | Footer pinned behind last section, revealed on scroll | | FooterStagger | Footer columns stagger in as section enters viewport |

Cards

| Block | Description | |---|---| | CardFlip | Click to flip between front and back faces (CSS preserve-3d + GSAP) | | CardStack | Cards fan out on scroll, click any to bring to front | | CardReveal | Image card with overlay and text sliding up on hover |

CTAs

| Block | Description | |---|---| | CTABanner | Full-width band, line → eyebrow → headline → button animate in sequence | | CTASplit | Two-column, left copy pins while right scrolls in with form or image |

Testimonials

| Block | Description | |---|---| | TestimonialCarousel | Section pins while quote cards scroll horizontally | | TestimonialStack | Auto-cycles quotes with a solid clip-wipe transition |

Text Effects

| Block | Description | |---|---| | CounterRow | Row of stats that all count up together on scroll | | TextRevealScroll | Words highlight one-by-one as you scroll through a pinned sentence | | MarqueeText | Oversized single line scrolling edge to edge, hover to slow |

Transitions

| Block | Description | |---|---| | PageWipe | Solid colour wipes across screen between route changes | | CurtainTransition | Two panels close like curtains, then open to reveal new page |

Subpath imports

Each category is available as a subpath if you want to keep bundle size lean:

import { FadeUp, CountUp } from '@dalydigital/blocks/reveals'
import { CTABanner, CTASplit } from '@dalydigital/blocks/ctas'
import { CardFlip, CardReveal } from '@dalydigital/blocks/cards'
import { TestimonialStack } from '@dalydigital/blocks/testimonials'
import { CounterRow, MarqueeText, TextRevealScroll } from '@dalydigital/blocks/text'

Theme

All blocks accept colour props so they work on any background. The themes export gives you the Daly Digital dark/light tokens if you want a head start:

import { themes } from '@dalydigital/blocks'

const t = themes.dark
// t.bg, t.text, t.textMuted, t.accent, t.accentFg, t.border

Requirements

• React 18+
• GSAP 3.12+ (ScrollTrigger, SplitText used internally)
• Tailwind CSS 4 (utility classes used in some blocks)
• TypeScript supported — all blocks ship with .d.ts files

Licence

MIT — free to use in client projects.