{"repo":"fluid-design-io/vision-ui","free":true,"listed":false,"github":"https://github.com/fluid-design-io/vision-ui","clone":"git clone https://github.com/fluid-design-io/vision-ui.git","description":"VisionOS UI built with React ⚛️","language":"TypeScript","stars":74,"topics":["design","framer-motion","react","ui","ui-components","ui-design","shadcn","shadcn-ui","visonos"],"license":null,"category":"ui-components","readme_excerpt":"Vision UI VisionOS-inspired UI kit and demo app — built with TanStack Start , Motion , and CSS . Live demo · Docs · Architecture --- What is Vision UI? Vision UI brings visionOS-like depth, glass, and spatial motion to the web with modern CSS — View Transitions, @starting-style , and pseudo-element highlights — plus composable and accessible React components. Motion handles gestures; route-shaped transition types handle the rest; modern API documentation (powered by Fumadocs) is built-in. What makes the UI tick 1. Route-shaped view transitions src/router.tsx inspects from / to paths and returns view transition types — not animation code: - home-app-launch — / ↔ any in-app route (Settings, App Store, …) - ornament-tab-switch — / ↔ /people ↔ /environments CSS listens with :active-view-transition-type(...) and picks keyframes. Add a new app route under (apps)/ and it automatically gets the launch transition; no per-route React animation tree. 2. One grid cell, three lifecycles Every honeycomb tile uses data-slot=\"grid-cell\" and shared helpers in grid-list.utils.ts : Moment Mechanism -------- ----------- First visit @starting-style + --stagger-delay (center-out ripple) Open / close app ::view-transition-old/new(.grid-cell) + grid-cell-exit / grid-cell-enter Home / People / Environments tabs Lighter grid-cell-tab-switch- keyframes Stagger distance is Manhattan distance from the middle row’s center column — one function, same timing in CSS and (where needed) JS. 3. Surface — glass ","default_branch":null,"files":null,"tree":[],"storefront":"/r/fluid-design-io","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/fluid-design-io/vision-ui/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}