---
name: "@joyco"
slug: "joyco"
description: "JOYCO Hub is the internal public registry of the JOYCO studio, hosting three content categories: 24 Components, 15 Toolbox items, and 13 Logs. Notable components include MobileMenu, ScrollArea with gradient overlays, a Chat UI, HLSVideoPlayer, Marquee, Scramble Button, Magnetic, Typewriter, Spritesheet Sequencer, Image Sequence, Infinite List, and Mention. Canvas utilities cover 2D and R3F/Three.js 3D. Built with React and Tailwind; some pieces use framer-motion/motion. Free and open source. Use for: adding studio-grade, interaction-heavy primitives (media playback, canvas, scroll effects) to a shadcn/ui project without reaching for a full component library."
category: "Component library (general)"
tags: ["3d", "aesthetic", "ai", "animation", "audio", "backgrounds", "buttons", "cards", "charts", "components", "design-system", "forms", "gaming", "hooks", "media", "mobile", "navigation", "overlays", "tables", "text-effects", "theming"]
framework: "react"
license: null
author: "joyco-studio"
website: "https://registry.joyco.studio"
github: "https://github.com/joyco-studio/registry"
registry: "https://registry.joyco.studio/r/registry.json"
pro: false
pro_url: null
github_stars: 22
component_count: 48
generated_at: "2026-07-28T08:00:50.948Z"
---

# @joyco

JOYCO Hub is the internal public registry of the JOYCO studio, hosting three content categories: 24 Components, 15 Toolbox items, and 13 Logs. Notable components include MobileMenu, ScrollArea with gradient overlays, a Chat UI, HLSVideoPlayer, Marquee, Scramble Button, Magnetic, Typewriter, Spritesheet Sequencer, Image Sequence, Infinite List, and Mention. Canvas utilities cover 2D and R3F/Three.js 3D. Built with React and Tailwind; some pieces use framer-motion/motion. Free and open source. Use for: adding studio-grade, interaction-heavy primitives (media playback, canvas, scroll effects) to a shadcn/ui project without reaching for a full component library.

## Links

- Website: https://registry.joyco.studio
- GitHub: https://github.com/joyco-studio/registry
- Registry JSON: https://registry.joyco.studio/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/joyco
- This file: https://sh4dcn.vercel.app/md/joyco.md

## Install

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

## Components (48)

| name | type | description | install |
| --- | --- | --- | --- |
| infinite-list | registry:component | A bias-based infinite scroll wrapper and hook. | `npx shadcn@latest add https://registry.joyco.studio/r/infinite-list.json` |
| marquee | registry:component | The all in one marquee component with smooth Web Animations API. | `npx shadcn@latest add https://registry.joyco.studio/r/marquee.json` |
| file-button | registry:component | A button that opens a file input when clicked. | `npx shadcn@latest add https://registry.joyco.studio/r/file-button.json` |
| file-dropzone | registry:component | A drag-and-drop file upload component with image preview, validation, and error handling. | `npx shadcn@latest add https://registry.joyco.studio/r/file-dropzone.json` |
| mobile-menu | registry:component | A full-screen overlay mobile menu. | `npx shadcn@latest add https://registry.joyco.studio/r/mobile-menu.json` |
| scroll-area | registry:component | A scrollable area component with customizable top and bottom shadows that appear when content overflows. | `npx shadcn@latest add https://registry.joyco.studio/r/scroll-area.json` |
| chat | registry:component | A composable chat component | `npx shadcn@latest add https://registry.joyco.studio/r/chat.json` |
| hls-video-player | registry:component | A headless HLS video player with native HLS detection and error handling. | `npx shadcn@latest add https://registry.joyco.studio/r/hls-video-player.json` |
| action-hint | registry:component | A particle emitter for showing ephemeral action feedback hints that fade out. | `npx shadcn@latest add https://registry.joyco.studio/r/action-hint.json` |
| image-sequence | registry:component | A canvas-based image sequence player with binary progressive loading for smooth playback. | `npx shadcn@latest add https://registry.joyco.studio/r/image-sequence.json` |
| typewriter | registry:component | A lightweight typewriter text component that cycles through phrases with minimal JavaScript. | `npx shadcn@latest add https://registry.joyco.studio/r/typewriter.json` |
| spritesheet-sequencer | registry:component | A WAAPI-powered spritesheet animator for squared grid-based spritesheets with stepped frame animation. | `npx shadcn@latest add https://registry.joyco.studio/r/spritesheet-sequencer.json` |
| magnetic | registry:component | A cursor-attraction wrapper that makes inner content subtly follow the mouse position. | `npx shadcn@latest add https://registry.joyco.studio/r/magnetic.json` |
| scramble | registry:component | A GSAP registered effect that decodes text with staggered character-by-character reveal animation. | `npx shadcn@latest add https://registry.joyco.studio/r/scramble.json` |
| scramble-button | registry:component | A button that scrambles its text on hover using the scramble GSAP effect. | `npx shadcn@latest add https://registry.joyco.studio/r/scramble-button.json` |
| brick-breaker | registry:component | A fully-featured brick breaker game with multiple levels, brick types, and proper collision physics. | `npx shadcn@latest add https://registry.joyco.studio/r/brick-breaker.json` |
| snake-game | registry:component | A minimal, themeable snake game component with highscore persistence. | `npx shadcn@latest add https://registry.joyco.studio/r/snake-game.json` |
| space-invaders | registry:component | A vertical-scrolling shoot-'em-up with enemy waves, a scaling boss (REBEL CRUSHER), pause, and highscore persistence. | `npx shadcn@latest add https://registry.joyco.studio/r/space-invaders.json` |
| typed-emitter | registry:lib | A thin typed wrapper around tiny-emitter that lets subclasses pin an event-map type for fully typed on/emit. | `npx shadcn@latest add https://registry.joyco.studio/r/typed-emitter.json` |
| canvas-2d | registry:component | A DPR-aware 2D canvas component and hook that handles sizing, pixel ratio, and context setup automatically. | `npx shadcn@latest add https://registry.joyco.studio/r/canvas-2d.json` |
| debug-canvas | registry:component | An enhanced R3F Canvas with built-in debug helpers — orbit/fly controls (mutually exclusive), grid, camera monitor, and performance stats — all toggled via a s… | `npx shadcn@latest add https://registry.joyco.studio/r/debug-canvas.json` |
| debug | registry:component | A tweakpane-powered debug panel with URL-persisted state, draggable UI, and reactive hooks for binding component values. | `npx shadcn@latest add https://registry.joyco.studio/r/debug.json` |
| avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://registry.joyco.studio/r/avatar.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://registry.joyco.studio/r/badge.json` |
| button | registry:ui | Displays a button or a component that looks like a button. | `npx shadcn@latest add https://registry.joyco.studio/r/button.json` |
| button-group | registry:ui | Groups multiple buttons or inputs into a single visual unit. | `npx shadcn@latest add https://registry.joyco.studio/r/button-group.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://registry.joyco.studio/r/card.json` |
| chart | registry:ui | Composable charting components built on top of Recharts. | `npx shadcn@latest add https://registry.joyco.studio/r/chart.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://registry.joyco.studio/r/collapsible.json` |
| dropdown-menu | registry:ui | Displays a menu to the user triggered by a button. | `npx shadcn@latest add https://registry.joyco.studio/r/dropdown-menu.json` |
| input | registry:ui | Displays a form input field. | `npx shadcn@latest add https://registry.joyco.studio/r/input.json` |
| input-group | registry:ui | Composable input group with addons, buttons, and textarea support. | `npx shadcn@latest add https://registry.joyco.studio/r/input-group.json` |
| kbd | registry:ui | Displays a keyboard key or shortcut. | `npx shadcn@latest add https://registry.joyco.studio/r/kbd.json` |
| media-player | registry:ui | A composable media player with controls, settings, captions, and PiP support. | `npx shadcn@latest add https://registry.joyco.studio/r/media-player.json` |
| mention | registry:ui | An autocomplete mention input component. | `npx shadcn@latest add https://registry.joyco.studio/r/mention.json` |
| popover | registry:ui | Displays rich content in a portal triggered by a button. | `npx shadcn@latest add https://registry.joyco.studio/r/popover.json` |
| select | registry:ui | Displays a list of options for the user to pick from. | `npx shadcn@latest add https://registry.joyco.studio/r/select.json` |
| separator | registry:ui | Visually or semantically separates content. | `npx shadcn@latest add https://registry.joyco.studio/r/separator.json` |
| slider | registry:ui | An input where the user selects a value from within a given range. | `npx shadcn@latest add https://registry.joyco.studio/r/slider.json` |
| switch | registry:ui | A control that allows the user to toggle between checked and unchecked. | `npx shadcn@latest add https://registry.joyco.studio/r/switch.json` |
| tabs | registry:ui | A set of layered sections of content displayed one at a time. | `npx shadcn@latest add https://registry.joyco.studio/r/tabs.json` |
| textarea | registry:ui | Displays a form textarea field. | `npx shadcn@latest add https://registry.joyco.studio/r/textarea.json` |
| tooltip | registry:ui | A popup that displays information related to an element on hover. | `npx shadcn@latest add https://registry.joyco.studio/r/tooltip.json` |
| cluster | registry:ui | A flex container with the design system gap and an optional filler for space distribution. | `npx shadcn@latest add https://registry.joyco.studio/r/cluster.json` |
| joyco-theme | registry:theme | JOYCO brand theme with light and dark mode color tokens. | `npx shadcn@latest add https://registry.joyco.studio/r/joyco-theme.json` |
| joyco-fonts | registry:lib | JOYCO brand font configuration with Public Sans and Roboto Mono. | `npx shadcn@latest add https://registry.joyco.studio/r/joyco-fonts.json` |
| utils | registry:lib | The cn class-merge helper used by every JOYCO UI component. | `npx shadcn@latest add https://registry.joyco.studio/r/utils.json` |
| ui | registry:style | The full JOYCO UI kit — all components and brand theming. | `npx shadcn@latest add https://registry.joyco.studio/r/ui.json` |

## For AI agents

```text
You are adding components from @joyco to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/joyco.md) for the component list.
2. Fetch the machine-readable index: https://registry.joyco.studio/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: joyco).
```