Bookmark fold

Buttons

About

A bookmark corner folds on hover, fills on save, and settles with a small downward motion.

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 * as React from "react";
import Component, { type Props, type State } from "@/components/ui/bookmark-fold";
const settings = {"title": "Save for later", "showContext": true};
const ease=(x:number)=>{x=Math.max(0,Math.min(1,x));return x*x*(3-2*x)};
const pulse=(t:number,a:number,b:number)=>ease((t-a)/.3)*(1-ease((t-b)/.3));
export function showcase(time:number):State{const t=((time%6)+6)%6;const saved=t>=1.8&&t<4.4;return {open:t>.7&&t<4.8,active:saved?1:0,reveal:saved?ease((t-1.8)/.22):t>=4.4?1-ease((t-4.4)/.22):0,blend:saved?Math.max(0,Math.sin(Math.min(1,(t-1.8)/.38)*Math.PI)):0};}
export default function Demo(props: any = {}) {
 const {showcaseTime,...incoming}=props;const merged={...settings,...incoming};
 return <div style={{width:"100%",minWidth:0}}><Component {...merged} state={showcaseTime===undefined?incoming.state:showcase(showcaseTime)} seeking={showcaseTime!==undefined||incoming.seeking}/></div>;
}