React Recipe • Production Pattern
Bookmark Animation in React: Fluid Save, Favorite, & Ribbon Transitions
A delight-driven bookmark or save button is crucial for engagement on blogs, e-commerce stores, and media platforms. Instead of a sterile instant icon swap, ExodeUI provides fluid spring scaling, ribbon unfold mechanics, and particle bursts that make saving content feel rewarding. All transitions run smoothly with zero layout jumps.
Runnable ExodeUI React Code Example
Production ReadyImport the ExodeUICanvas component directly into your React application tree. Wire states, triggers, and parameters declaratively:
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function BookmarkButton({ onBookmark, initialSaved = false }) {
const [isSaved, setIsSaved] = useState(initialSaved);
const handleToggle = () => {
const next = !isSaved;
setIsSaved(next);
if (onBookmark) onBookmark(next);
};
return (
<button
onClick={handleToggle}
aria-label={isSaved ? "Remove from bookmarks" : "Save to bookmarks"}
className="bookmark-btn"
>
<ExodeUICanvas
src="/scenes/bookmark-ribbon.json"
stateMachine="BookmarkMachine"
inputs={{
"isSaved": isSaved
}}
/>
</button>
);
}Frequently Asked Questions about bookmark animation
How do spring physics enhance the bookmark button feel?
When toggled, ExodeUI applies an overshoot scale (1.2x) with rapid spring dampening, simulating physical mechanical bounce that delights the user.
Can the bookmark button trigger optimistic UI updates in React?
Yes. By binding component state to the inputs prop, the animation triggers instantly upon click, while your network request resolves in the background.
How do I handle keyboard focus and accessibility for bookmark icons?
Wrap the ExodeUICanvas in a semantic <button> with proper aria-label and aria-pressed attributes to ensure complete WCAG accessibility.
Can the bookmark icon play a small particle sparkle effect on save?
Yes. ExodeUI state machines support secondary particle layers that burst outward only on the Idle -> Saved transition, leaving the unsave animation clean and subtle.