Bookmark Fold

Buttons

About

An animated save/bookmark toggle button that pours colour down a ribbon shape, settles into its slot, and fades in a short "Saved" note when activated.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bookmark Fold to your project and fits it to your theme.

Code

How Bookmark Fold is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import BookmarkFold from "@/components/ui/bookmark-fold-save";

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#f3f1ec] p-8 text-[#1b1a17]">
      <div className="flex w-full max-w-sm flex-col gap-5 rounded-[20px] bg-white p-6 shadow-[0_20px_40px_-24px_rgb(0_0_0/0.35)]">
        <div className="flex items-start justify-between gap-4">
          <div>
            <p className="font-mono text-[11px] uppercase tracking-[0.14em] opacity-50">
              Guide · 6 min read
            </p>
            <p className="mt-2 text-[17px] font-medium leading-snug">
              Three days in Jabal Akhdar: terraces, roses and a very cold
              morning.
            </p>
          </div>
          <BookmarkFold label="Save this guide" />
        </div>
      </div>
    </div>
  );
}