Corner Frame

The shape of game menus and sci-fi panels, with a border that follows the cuts, deepening a little in use.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add corner-frame

Example

import { CornerFrame } from "@/components/galactrex/corner-frame";

<CornerFrame corners="all"><Menu /></CornerFrame>

Installs to components/galactrex/corner-frame.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content.
`cut`	`number`	`16`	Corner cut in px.
`corners`	`"all" \| "diagonal" \| "top-right" \| "bottom-left"`	`"diagonal"`	Which corners.
`responsive`	`boolean`	`true`	Deepen on hover or focus.
`className`	`string`	—	Extra classes for the outer element.