---
name: "@satoriui"
slug: "satoriui"
description: "Satori UI is a collection of 50+ production-ready React components with physics-based spring-motion animations powered by motion-react (Framer Motion). Components are organized into Components, Interactions, Foundations, and Templates sections. The site highlights a keyboard UI component as a featured example of the tactile, physics-driven feel. Fully accessible, MIT licensed. A Templates and Pricing section suggests freemium or commercial tiers may exist. Tailwind CSS, React, motion-react. Use for: adding premium, spring-physics-driven UI interactions — keyboards, cards, toggles, and micro-interactions — to apps that need a polished, tactile motion feel beyond CSS transitions."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "blocks", "buttons", "cards", "loaders", "marketing", "pro-available", "saas", "text-effects"]
framework: "react"
license: null
author: null
website: "https://satoriui.site"
github: "N/A"
registry: "https://satoriui.site/r/registry.json"
pro: true
pro_url: "https://satoriui.site/pricing"
github_stars: null
component_count: 15
generated_at: "2026-07-28T08:59:05.895Z"
---

# @satoriui

Satori UI is a collection of 50+ production-ready React components with physics-based spring-motion animations powered by motion-react (Framer Motion). Components are organized into Components, Interactions, Foundations, and Templates sections. The site highlights a keyboard UI component as a featured example of the tactile, physics-driven feel. Fully accessible, MIT licensed. A Templates and Pricing section suggests freemium or commercial tiers may exist. Tailwind CSS, React, motion-react. Use for: adding premium, spring-physics-driven UI interactions — keyboards, cards, toggles, and micro-interactions — to apps that need a polished, tactile motion feel beyond CSS transitions.

## Links

- Website: https://satoriui.site
- GitHub: N/A
- Registry JSON: https://satoriui.site/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/satoriui
- This file: https://sh4dcn.vercel.app/md/satoriui.md
- Pro / pricing: https://satoriui.site/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://satoriui.site/r/registry.json
pnpm dlx shadcn@latest add https://satoriui.site/r/registry.json
bunx shadcn@latest add https://satoriui.site/r/registry.json
# clone the source repo
git clone N/A.git
# fetch the raw registry index
curl -s https://satoriui.site/r/registry.json
```

## Components (15)

| name | type | description | install |
| --- | --- | --- | --- |
| dotted-modern | registry:component | Modern dotted background hero component with animated open-source badge. | `npx shadcn@latest add https://satoriui.site/r/dotted-modern.json` |
| keyboard | registry:component | Sleek, minimalistic & interactive keyboard UI. | `npx shadcn@latest add https://satoriui.site/r/keyboard.json` |
| security-card | registry:component | A sleek security card component with 3D shield visualization. | `npx shadcn@latest add https://satoriui.site/r/security-card.json` |
| scroll-tracker | registry:component | Track scroll progress with a visual indicator. | `npx shadcn@latest add https://satoriui.site/r/scroll-tracker.json` |
| pro-button | registry:component | A high-impact call-to-action with a signature pixel icon and premium finish. | `npx shadcn@latest add https://satoriui.site/r/pro-button.json` |
| typewriter-loop | registry:component | A looping typewriter CTA with a gradient support, premium touch. | `npx shadcn@latest add https://satoriui.site/r/typewriter-loop.json` |
| cyberpunk-button | registry:component | Futuristic, minimalistic button with smooth animations. | `npx shadcn@latest add https://satoriui.site/r/cyberpunk-button.json` |
| flip-clock | registry:component | Neat and clean functional clock ui with buttery smooth flip animations. | `npx shadcn@latest add https://satoriui.site/r/flip-clock.json` |
| encoded-reveal | registry:component | Matrix like animation, reveals text with random characters. | `npx shadcn@latest add https://satoriui.site/r/encoded-reveal.json` |
| slide-up-reveal | registry:component | Buttery smooth text reveal with slide up reveal animation. | `npx shadcn@latest add https://satoriui.site/r/slide-up-reveal.json` |
| blur-reveal | registry:component | Mysterious blur reveal animation, just feels awesome. | `npx shadcn@latest add https://satoriui.site/r/blur-reveal.json` |
| shimmer-text | registry:component | Smooth shimmer animation for premium touch. | `npx shadcn@latest add https://satoriui.site/r/shimmer-text.json` |
| kinetic-grid | registry:component | Kinetic grid animation. | `npx shadcn@latest add https://satoriui.site/r/kinetic-grid.json` |
| beacon-badge | registry:component | A status badge with a customizable beacon (ping) animation and blur reveal text. | `npx shadcn@latest add https://satoriui.site/r/beacon-badge.json` |
| pulse-button | registry:component | A high-impact, beautifully animated button with pulsing dot patterns and smooth interactions. | `npx shadcn@latest add https://satoriui.site/r/pulse-button.json` |

## For AI agents

```text
You are adding components from @satoriui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/satoriui.md) for the component list.
2. Fetch the machine-readable index: https://satoriui.site/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: satoriui).
```