Bop Shop

A detailed SVG tab marker rendered on a metallic panel with recess, backing, and floor shadow. Click to toggle - the marker lifts out of its recess with a spring animation, revealing a blue face with noise texture, dashed inset lines, and glow edges. The backing card lifts separately with its own shadow. Includes keyboard support and reduced motion handling.

tab-marker-preview

Loading preview...

Why it helps: A tab marker turns a bookmark into a physical gesture. The lift-out animation with independent backing and floor shadow creates a sense of depth that communicates 'this item is saved'.

Also good to know:

-The SVG uses unique gradient/filter IDs per instance - many markers on one page means many SVG defs
-The panel and backdrop are static, so the marker feels like it's floating over a fixed surface
-Framer Motion is required - adds to bundle size if not already used

Source

components/live/BopShop.tsx

// Loading source...

Usage

example.tsx

import { BopShop } from "@/components/live/BopShop";

<BopShop
  defaultActive={false}
  onChange={(active) => console.log("marked:", active)}
/>
import { BopShop } from "@/components/live/BopShop";

<BopShop
  defaultActive={false}
  onChange={(active) => console.log("marked:", active)}
/>

Props

defaultActivefalse

boolean

Initial marked state.

onChange-

(active: boolean) => void

Called when the marker is toggled.

className-

string

Additional CSS classes.