Filling Point

A cinematic pointer-origin fill that turns every hover into a three-beat paint event.

Description

Filling Point paints Framer CTAs from the exact pointer-enter point: three solid disks expand from a seed that touches the nearest button border, then retract in reverse. Choose Cinematic, Balanced, Snappy, or Custom enter/exit. Solid and Soft fill styles, curated color layers, touch and keyboard feedback, reduced-motion support, and a canvas-safe idle state. Zero external packages.

Categories / tags

Components · Buttons · Calls to Action · Hover · Motion · Interaction · Editorial · Portfolio · Accessibility

Features

• Shared pointer-enter origin across all paint layers

• Seed circumference starts at the nearest button border

• Three-beat forward cascade and reverse leave

• Solid and Soft fill styles (Soft = gradient wash, not blur)

• Cinematic, Balanced, Snappy, and Custom motion

• Configurable colors and 0–360ms layer delays

• Touch, keyboard, focus-visible, and reduced-motion behavior

• Difference-blend label contrast on live hover

• Canvas/export idle state

• Zero external dependencies