Anchored action menu

Component 4

About

A compact project menu with keyboard navigation, local file actions, and a precise anchored reveal.

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

Code

How Anchored action menu 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/anchored-action-menu";
const settings = {"title": "Summer release"};
const ease=(x:number)=>{x=Math.max(0,Math.min(1,x));return x*x*(3-2*x)};
const pulse=(t:number,start:number,end:number)=>ease((t-start)/.3)*(1-ease((t-end)/.3));
export function showcase(time:number):State{const t=((time%6)+6)%6;const r=pulse(t,.55,3.7);return {open:r>0,reveal:r,active:t>1.7?1:0,notice:t>3.75&&t<5.15?'Draft duplicated locally':''};}
export default function Demo(props:Props & {showcaseTime?:number}) {
  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>;
}