Interaction FX
Pointer-driven effects, physical motion and decorative backgrounds. Springy, opt-in via a class or data attribute, and calm under reduced motion.
Magnet and sticky pull
Any element drifts toward the pointer: data-sf-magnet="0.4" with data-sf-magnet-radius. data-sf-sticky pulls the element and its .sf-sticky__inner while hovered.
3D tilt card with glare
data-sf-tilt="14". Add data-sf-glare="off" to drop the glare. Children with .sf-tilt__lift pop out in 3D.
Weekly focus
Hover and move. The card follows you, then springs back.
Subtle 8 degree tilt.
Spotlight card
data-sf-spotlight lights the surface and border around the cursor. Wrap cards in data-sf-spotlight-group to light the whole grid at once.
Deep work blocks.
Quiet, linked, fast.
One link, no fuss.
Glow and animated border
Root class .sf-glow (conic rotating border plus blurred glow). Modifiers: --mono, --soft (glow only), --pulse.
Ripple on click
data-sf-ripple (or ="center"). Works from keyboard too.
Jelly press and wobble
data-sf-jelly: wobbles on hover, squashes on press, jiggles on click.
Press and hold
.sf-hold with data-sf-hold="1200" (ms). Fires soft:hold plus a confetti burst. Hold Space or Enter too.
Slide to confirm
.sf-slide. Drag the handle, or focus it and use arrow keys / Enter.
Confetti variants
Soft.confetti.burst / cannon / rain / shapes / fireworks / stop, or the attribute data-sf-fx-confetti with a value of burst, cannon, rain, stars, emoji or fireworks.
Particles background
.sf-particles + data-sf-particles="60". Dots drift, connect, and flee the pointer (data-sf-repel, data-sf-link).
Sparkles
data-sf-sparkles twinkles stars around the element on hover or focus. Optional colour list.
Background patterns
.sf-bg-dots / -grid / -noise / -stripes with fades .sf-bg--fade-b / -t / -radial / -edge. .sf-bg-drift scrolls the pattern; --sf-fx-gap sets spacing.
Orbs and aurora
.sf-bg-orbs with four .sf-bg-orbs__orb children. CSS only. Modifiers --mono, --aurora.
Morphing blobs
.sf-blobby (border-radius morph) with --fast --egg --pebble --spin --grad --hover, plus an SVG path morph (SMIL).
Waves and curved dividers
.sf-wave holds three svg layers that drift. .sf-curve clips a section: --top --tilt --arc --surface.
Utility animations
.sf-anim-float / levitate / pulse / ping / wiggle / shake / heartbeat / spin. Add -fast, -slow, or .sf-anim-hover to play only on hover.
Flip card and 3D rotator
.sf-flip flips on click / Enter (--hover also on hover, --x flips vertically). .sf-rotator is a cube; add --carousel for a ring. Drag, arrows, or buttons.
Drag and drop
.sf-drag springs home with your throw velocity (data-sf-drag="free" to stay put). .sf-sortable reorders with FLIP animation; keyboard: focus an item, Space to grab, arrows to move, Space to drop.
- Design the landing page
- Write the copy
- Ship it
- Celebrate
Swipe card stack
.sf-swipestack. Throw cards with velocity, press the buttons, or use arrow keys on the stack. Emits soft:swipe.
Magnify list
data-sf-magnify (or ="vertical") scales children by pointer distance. Also magnifies the focused child.
Pull to refresh and elastic overscroll
.sf-ptr. Pull down at the top (touch or mouse drag); rubber-bands at both ends. Emits soft:refresh with detail.done(). Button fallback: data-sf-ptr-trigger="id".
Hover-reveal cards and distortion lines
.sf-reveal: media zooms, caption slides up, icon pops. .sf-lines: bars bend toward the pointer (data-sf-lines="16").
Lens and image compare
data-sf-lens="2.5" wraps an img or inline svg. .sf-imgcompare uses a real range input, so it works with keyboard and touch.
Fancy buttons
.sf-fx-btn with --gradient (animated), --shine (travelling border), --sweep, and monochrome --ink fill that grows from the pointer.
Theme toggle with circular reveal
data-sf-theme-toggle. Uses the View Transitions API from the click point, falls back to a fade. Remembers the choice.
Cursor trail
.sf-trail with data-sf-trail="dots|ribbon", or page-wide with Soft.cursorTrail(). Add data-sf-trail-color="accent" for the accent palette.
Gravity sandbox
Opt-in physics: .sf-gravity with .sf-gravity__item children. Drop them, then grab and throw. Reduced motion stacks them instantly.
Emoji reaction burst
data-sf-react="👍 ❤️ 🔥" floats emojis up from the click and bumps .sf-react__count. Also Soft.react(el, emojis).
Micro-interactions kit
.sf-pop-check (checkbox pop), .sf-jswitch (jelly toggle), .sf-like with data-sf-like (heart with particles).
Screen shake on error
Soft.shake(el, { amplitude: 8, duration: 500 }) (also buzzes on phones). Declarative: data-sf-shake on a button, or data-sf-shake-invalid on a form to shake when validation fails.