Animated Corners

A crisp selection indicator for tiles, thumbnails and level-select grids.

Install

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

Terminal

npx @galactrex/ui add animated-corners

Example

import { AnimatedCorners } from "@/components/galactrex/animated-corners";

<AnimatedCorners selected={i === picked}><Tile /></AnimatedCorners>

Installs to components/galactrex/animated-corners.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`	—	Framed content.
`corner`	`number`	`14`	Bracket length at rest.
`width`	`number`	`1.5`	Stroke width.
`close`	`boolean`	`true`	Close on hover or focus.
`selected`	`boolean`	`false`	Keep it closed.
`color`	`string`	—	Any CSS colour; defaults to a theme token.
`className`	`string`	—	Extra classes for the outer element.