Elevated task card
WEEKLY GOALLaunch in progress
Lift cards 8–14px on hover and strengthen the shadow.Motion that makes the interface feel considered.
Practical interaction patterns for product cards, calls to action, status messages, and loading states. Each pattern uses the Haketi system’s color, type, and motion language.
Hover & reveal
Use a confident response to reward intent. Keep transitions short, easy, and purposeful.
Cursor-aware CTA
A subtle cursor pull makes a key action feel tactile.Content reveal
New way to work.
A color wipe turns a simple card into an announcement.Reveal extra context on intentional hover.
System feedback
Gentle animated feedback makes waiting and completion feel clear without interrupting the user.
Success notification
✓Changes savedYour workspace is up to date.
Expanding cards
PROJECTS12 active
Dot loader
Navigation & data
Small transitions make orientation, status, and progress feel effortless to understand.
Active navigation state
Move the active indicator rather than replacing the whole view abruptly.Live metric
MONTHLY GROWTH+24%
Progress stepper
1234
Show clear progress during a multi-step form or onboarding flow.Content loading
A subtle shimmer reserves space while real content arrives.
Content & conversion
Use these patterns for FAQs, newsletters, confirmations, and contextual prompts.
FAQ expansion
Yes. Upgrades and downgrades are available whenever you need them.
Every workspace includes fast, thoughtful help from our team.
Newsletter confirmation
Confirm a form action in place; avoid redirecting for a simple subscription.Contextual modal
Scale and lift a dialog just enough to establish focus.Copied state
Replace the label briefly when an invisible action completes.Scroll stacking cards
Use this storytelling pattern for features, product walkthroughs, principles, or a sequence of important ideas.
Start with a single, clear promise.
Each card holds its place while the next idea arrives, keeping the story easy to follow.
Introduce depth without losing focus.
The dark surface creates a confident contrast as the experience builds momentum.
Give the primary color a moment to lead.
Use this high-attention state for a product advantage, activation point, or key call to action.
End with a concise invitation forward.
Close the scroll story with a next step that feels earned by the content above.
Make every movement matter.
Use motion to explain a change, acknowledge a choice, or guide attention.