Micro-interactions

Stylegeneral

Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive. Best for Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components.

Small animations gesture-based tactile feedback subtle animations contextual interactions responsive

#22C55E

#EF4444

#F59E0B

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Micro-interactions

Keywords: Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive
Primary colours: Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B
Secondary colours: Accent feedback, neutral supporting, clear action indicators
Effects & animation: Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic
Best for: Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components
Do not use for: Desktop-only, critical performance, accessibility-first (alternatives needed)

## Prompt keywords
Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.

## CSS / technical
animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop

## Implementation checklist
☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle

## Design system variables
--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source