FRM-260918
FRAME/26 · Conference
Get early access
- What
- Early bird
- Where
- Lisbon + online
- Price
- $179
Two days on interface engineering: motion, rendering and the craft of building things that feel right.
AdmitYour name
# FRM-260918Oct 28
Show at the door
FRAME/26
09:30Doors & coffee
10:15Keynote: Motion as material
13:00Workshops: shaders, springs, type
18:30Afterparty at the river
Non-transferable · Oct 28, 2026 · FRM-260918
<EventTicket variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion and uqr, plus the Ovio theme, world, motion, format, toy, qr-code, auto-height, goo-filter items.
npx shadcn add JanaSundar/ovio/event-ticket↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { EventTicket } from "@/components/ovio/event-ticket/event-ticket"
<EventTicket
variant="minimal"
event={event}
onBook={reserve}
onTear={checkIn}
/>Built with: SVG · CSS 3D · Motion for React
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| event | { name; date; venue?; title?; description?; tier?; price?; schedule? } | Printed on the ticket. The schedule goes on the back. |
| variant | | "minimal" | "craft" | "retro" | "toy" | Which world to render. Defaults to the nearest OvioProvider, then minimal. |
| layout | "horizontal" | "vertical" | Side stub or tear-off bottom. Horizontal turns vertical below 600px. |
| ticketId | string | Printed on the stub and encoded in the QR code. |
| defaultAttendee | { name; email } | Starts the ticket already booked. |
| onBook | (attendee) => Promise<void> | The book button waits on it; a rejection shows its message. |
| onTear | (attendee | null) => void | Fires when the stub is dragged off, booked or not. |
| flipped / defaultFlipped | boolean | QR side showing, controlled or not. |
| onFlippedChange | (flipped: boolean) => void | Fires when the ticket flips. |
| className | string | Merged onto the root. |