BoteamMicro · Active state
Button press
Subtle scale-down on press so clicks feel tactile without bounce.
// Motion recipes · For solo founders
See the motion. Copy the prompt.
Forty-eight recipes grouped by founder job: launch landing, waitlist, app UI, feedback, editorial, and polish. Live demos autoplay in the dark stage. Hover to replay, then copy the English prompt into Cursor or Claude.
48 recipes · 32 shown
Micro · State change
Toggle switch
Knob slides with a soft background color crossfade.
Remember me
Micro · Confirm
Checkbox check
Checkmark draws in with a short scale pop on the box.
Focus me
Micro · Focus
Input focus ring
Border and soft glow animate in when the field receives focus.
Headline
Supporting line
Entrance · On load
Fade up reveal
Content enters with opacity 0 to 1 and 12px upward travel.
- Engage
- Create
Entrance · Sequence
Staggered list
List rows appear one after another with a short delay.
Open
Modal panel
Entrance · Overlay
Scale in modal
Dialog scales from 0.96 to 1 with a simultaneous backdrop fade.
Resource cardHover lifts
Hover · Elevation
Card lift on hover
Card rises 2px with a warmer shadow on hover.
Read the field note
Hover · Text link
Underline reveal
Link underline grows from center using a pseudo-element scaleX.
Hover · Directional
Icon nudge
Arrow or chevron shifts 3px right on hover to imply forward action.
Show toast
Saved
Feedback · Notification
Toast slide in
Toast enters from bottom-right with slide and fade.
Complete
Feedback · Confirm
Success pulse
Check icon briefly scales up once to confirm an action.
Trigger error
bad@
Feedback · Validation
Error shake
Input or banner shakes horizontally once on validation failure.
Section reveals on scroll
Scroll · Reveal
Scroll fade in
Sections fade up when they enter the viewport.
Page A
Page B
Page · Transition
Page crossfade
Outgoing page fades out while incoming fades in over 200ms.
Page content
Layout · Conversion
Sticky CTA bar
A slim bar slides in from the bottom after scroll, keeping the primary CTA visible.
Feedback · Loading
Skeleton shimmer
Placeholder blocks pulse with a soft horizontal shimmer while data loads.
Headline
Supporting line
Entrance · Zero data
Empty state fade
Illustration, headline, and action fade up when a list or inbox has no items.
847signals
Text · Metric reveal
Number count up
Stat figures animate from 0 to their target value when scrolled into view.
Scroll · Reading
Scroll progress bar
A thin bar at the top tracks reading progress through the page.
Main
Panel
Layout · Panel
Drawer slide
Side panel slides in from the right with a dimmed backdrop.
OverviewNotes
Micro · Navigation
Tab underline
Active tab indicator slides horizontally to the selected tab.
What is included?
Field notes, prompts, and live demos.
Layout · Disclosure
Accordion expand
Section content height animates open with chevron rotation.
What is included?
Field notes, prompts, and live demos.
Layout · Launch FAQ
FAQ accordion
FAQ section using accordion expand with schema-friendly markup.
3
Micro · Alert count
Notification badge pop
Unread badge scales in once when count increases from zero.
Main
Panel
Layout · Mobile action
Bottom sheet
Panel slides up from the bottom with a drag handle on mobile.
Micro · Dark mode
Theme toggle morph
Sun/moon icon morphs inside the toggle knob on theme change.
Resource cardHover lifts
Hover · Editorial link
Link preview lift
Inline link card lifts slightly on hover like card-lift but for preview chips.
DesignOps
Micro · Filter chip
Chip select press
Toggle chip scales down on press and fills with accent when selected.
WeekMonth
Micro · View switch
Segmented control
Sliding pill background moves between 2–4 segment options.
1234
Micro · Verification
OTP digit cascade
Each OTP box fades up in sequence when the verify step mounts.
On the list
Feedback · Signup success
Waitlist check draw
Checkmark stroke draws in after successful waitlist submission.