Component
CornerFold
It records four separate corner visits, then compresses the content into a folded state that remains until you start over.
01 / Preview
Try it yourself.
Visit every corner first
Enter all four corners. Each visit stays counted until the card folds.
Mechanism
- 1
- Start with the card open and four unvisited corners.
- 2
- Move into each corner in any order.
- 3
- Watch the content fold only after the fourth visit.
- 4
- Use the reset inside the folded card to begin again.
02 / Usage
Put it somewhere.
example.tsxTSX
import { CornerFold } from "gra-ui";
import "gra-ui/styles.css";
export function FoldedCard() {
return <CornerFold>Visit every corner first</CornerFold>;
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe content folded after all four corners are visited.