Animations
Motion tokens, spring physics, and interaction hooks that give Tac UI its organic, physical feel.
Philosophy
Tac UI uses spring-based animations inspired by Dia Browser. Elements have mass and momentum — they spring into place with natural deceleration rather than sliding mechanically. The system is built on Framer Motion springs with five mass-differentiated presets called tacSpring.
Spring Presets
Import via import { tacSpring } from '@tac-ui/tokens'. Each preset varies in mass, creating distinct physical characters.
tacSpring.default
Standard — layout shifts, morphing
stiffness: 260 · damping: 34 · mass: 1
tacSpring.light
Nimble — tilt, interactive feedback
stiffness: 260 · damping: 34 · mass: 0.5
tacSpring.heavy
Weighty — overlays, large panels
stiffness: 220 · damping: 32 · mass: 1.5
tacSpring.magnetic
Snappy — dropdowns, toggles
stiffness: 340 · damping: 38 · mass: 0.8
tacSpring.entrance
Gentle arrival — page content
stiffness: 180 · damping: 28 · mass: 1.2
Duration Scale
CSS transition durations for non-spring animations. Access via motion.duration.
Easing Curves
CSS easing functions for transitions. Access via motion.easing.
standard
Default — slight overshoot
cubic-bezier(0.22, 1, 0.36, 1)
bounce
Playful — toggles, confirmations
cubic-bezier(0.34, 1.56, 0.64, 1)
spring
Stronger overshoot
cubic-bezier(0.22, 1.2, 0.36, 1)
elastic
Rubber-band snap
cubic-bezier(0.68, -0.2, 0.265, 1.2)
easeOut
Gentle deceleration
cubic-bezier(0, 0.55, 0.45, 1)
Motion Variants
Pre-built Framer Motion variant objects for common animation patterns. Import from @tac-ui/web internal constants.
defaultSpring
Standard spring — layout shifts, morphing
dropdownMotionVariants
Select, Combobox, Dropdown panels
panelVariants
Modal, Dialog, Popover overlays
blurFadeVariants
Alert, EmptyState, Toast entrance
feedbackVariants
Toast/Snackbar notification entry
Interactive Hover
Spring-based hover and tap effects for interactive elements. Click or hover to feel the physics.
// interactiveHover — buttons, cards, pagination
whileHover={{ scale: 1.02, y: -1 }}
whileTap={{ scale: 0.97, y: 0 }}
// subtleHover — navigation, breadcrumbs
whileHover={{ y: -1 }}
whileTap={{ scale: 0.98 }}
// microHover — table rows, avatars
whileHover={{ y: -1 }}
whileTap={{ scale: 0.98 }}Toggle
A button that swaps icons with a rotation animation. Uses tacSpring.light for snappy icon transitions.
<Toggle
checked={checked}
onChange={setChecked}
iconOn={<Moon />}
iconOff={<Sun />}
/>Interaction Hooks
Hooks for cursor-tracking effects. These power the Card component's interactive features and can be used independently.
Interactive Card
Hover to see spring-animated lift and press effects.