[{"id":"shoal","name":"Koi pond","description":"A pond of character-based fish that follow your cursor and create ripples when you touch the water.","category":"Backgrounds","categories":["Backgrounds"],"patterns":["Canvas","ASCII art","Animated background"],"flows":["Follow the cursor","Create ripples","Configure the pond","Pause and resume"],"color":"neutral","tag":"New","wide":true,"sourceDirectory":"shoal","sourceFiles":["shoal.tsx","shoal.module.css","vendor/shoal-engine.js","vendor/shoal-engine.d.ts","vendor/shoal-settings.js","vendor/shoal-settings.d.ts","README.md"],"dependencies":[],"usage":"\"use client\";\n\nimport { Shoal } from \"./shoal/shoal\";\n\nexport default function Example() {\n return ;\n}","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119}},{"id":"streaming-text","name":"Streaming text","description":"Clyra's word-by-word chat reveal, with opacity fades, partial chunks, and a bounded animation queue.","category":"Text","categories":["Text"],"patterns":["Text","Chat","Streaming"],"flows":["Display a response","Receive chunks","Pause and resume"],"color":"neutral","tag":"New","wide":true,"sourceDirectory":"streaming-text","sourceFiles":["streaming-text.tsx","streaming-text.module.css","veil.ts","README.md"],"dependencies":[],"usage":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { StreamingText } from \"./streaming-text/streaming-text\";\n\nconst response = \"Sure. Imagine we are building a small component library: a place to discover an idea, try it out, and bring it into your project without rebuilding it from scratch. The experience starts with something simple: finding what you need and understanding how it works by seeing it in motion.\\n\\nWhen you open a component, the workspace splits into two areas. The preview sits on the left, with enough space to see every detail. Its controls appear on the right. You can change its appearance, adjust values, and compare the result immediately, all in the same place without losing context.\\n\\nIn this example, the response arrives in chunks, just like a conversation. Each new word starts at a low opacity and gradually becomes visible. Words you have already read keep their position and appearance: they do not animate again when more content arrives. If a chunk completes a partial word, its animation continues from where it left off.\\n\\nWhen several words arrive together, the reveal spaces them out slightly. This delay keeps the text flowing, but it has a limit so the animation never builds up an endless wait. You can keep reading while the response grows, whether you receive a short sentence or an explanation spanning several paragraphs.\\n\\nYou can also pause playback to inspect a particular moment. When you resume, the text continues from that point. Replay starts again from the beginning, while the settings let you explore how larger chunks or more frequent updates affect the experience. Content arrival and word fades are controlled independently.\\n\\nNow think of a longer response: a code review, a design proposal, or a step-by-step explanation. The goal is to let you start reading from the first lines without waiting for everything to finish. As new information appears, earlier content remains available to select, copy, or revisit.\\n\\nThe component keeps its styles inside its own folder. You can use it on a light page, in a dark chat, or inside an application with different typography. It does not need this library's styles to work. It receives the accumulated text and reveals new words using the same animation system.\\n\\nFinally, if you prefer reduced motion, the text appears immediately. The information stays the same and reading does not depend on an animation. You can try all these options here, edit this response, and copy the example with your chosen configuration.\";\n\nexport default function Example() {\n const [text, setText] = useState(\"\");\n const [cycle, setCycle] = useState(0);\n\n useEffect(() => {\n // Local transport example. Replace this timer with your real stream.\n const characters = Array.from(response);\n let cursor = 0;\n let restart: ReturnType | undefined;\n setText(\"\");\n const timer = setInterval(() => {\n cursor = Math.min(cursor + 6, characters.length);\n setText(characters.slice(0, cursor).join(\"\"));\n if (cursor === characters.length) {\n clearInterval(timer);\n if (true) restart = setTimeout(() => setCycle((value) => value + 1), 2800);\n }\n }, 30);\n return () => { clearInterval(timer); clearTimeout(restart); };\n }, [cycle]);\n\n return ;\n}\n","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119}},{"id":"glyphblue","name":"Glyph Card Blue","description":"A blue character background with animated gaps that react to your cursor, powered by MetalForge's original engine.","category":"Backgrounds","patterns":["Canvas","ASCII art","Animated background","WebGL"],"flows":["Follow the cursor","Configure the background","Pause and resume"],"color":"neutral","tag":"New","wide":true,"sourceDirectory":"glyphblue","sourceFiles":["glyphblue.tsx","glyphblue.module.css","vendor/glyphblue-runtime.js","vendor/glyphblue-runtime.d.ts","vendor/provenance.json","README.md"],"dependencies":[],"usage":"\"use client\";\n\nimport { GlyphBlue } from \"./glyphblue/glyphblue\";\n\nexport default function Example() {\n return ;\n}","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"categories":["Backgrounds"]},{"id":"image-folders","name":"Image folders","description":"Translucent folders with files that fan out, pin open, and respond to selection with a gentle spring.","category":"Galleries","categories":["Galleries","Glass"],"patterns":["Gallery","Images","Folders","Glass"],"flows":["Fan out files","Select an image","Open and close"],"color":"neutral","tag":"New","wide":true,"sourceDirectory":"image-folders","sourceFiles":["image-folders.tsx","image-folders.module.css","README.md"],"dependencies":["motion"],"usage":"\"use client\";\n\nimport { ImageFolders } from \"./image-folders/image-folders\";\n\nconst images = [\n {\n \"id\": \"coast\",\n \"src\": \"https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=640&q=80\",\n \"label\": \"Coast\"\n },\n {\n \"id\": \"mountains\",\n \"src\": \"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=640&q=80\",\n \"label\": \"Mountains\"\n },\n {\n \"id\": \"forest\",\n \"src\": \"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=640&q=80\",\n \"label\": \"Forest\"\n },\n {\n \"id\": \"desert\",\n \"src\": \"https://images.unsplash.com/photo-1509316785289-025f5b846b35?auto=format&fit=crop&w=640&q=80\",\n \"label\": \"Desert\"\n }\n];\n\nexport default function Example() {\n return
\n \n
;\n}\n","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119}},{"id":"morph-dialog","name":"Morph dialog","description":"A dialog that expands from its button or card and returns to it, with the same motion as Nibble's Get Pro modal.","category":"Dialogs","categories":["Dialogs","Morph","Cards"],"patterns":["Modal","Dialog","Card","Transition"],"flows":["Expand a card","Open a dialog","Return to the trigger"],"color":"neutral","tag":"New","wide":true,"sourceDirectory":"morph-dialog","sourceFiles":["morph-dialog.tsx","morph-surface.tsx","morph-dialog.module.css","README.md"],"dependencies":[],"usage":"\"use client\";\n\nimport { MorphDialog } from \"./morph-dialog/morph-dialog\";\n\nexport default function Example() {\n return \n

Your content goes here.

\n ;\n}","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119}},{"id":"glass-reveal","name":"Glass reveal","description":"A logo revealed through refracting glass, using the same animation as Nibble's Get Pro logo.","category":"Logo","categories":["Logo","Glass"],"patterns":["Logo","Glass","WebGL","Reveal"],"flows":["Reveal a logo","Replay the animation","Pause and resume"],"color":"neutral","tag":"New","wide":true,"sourceDirectory":"glass-reveal","sourceFiles":["glass-reveal.tsx","glass-reveal.module.css","glass-reveal-engine.js","glass-reveal-timeline.ts","default-logo.ts","README.md","LICENSE"],"dependencies":[],"usage":"\"use client\";\n\nimport { GlassReveal } from \"./glass-reveal/glass-reveal\";\n\nexport default function Example() {\n return ;\n}","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119}},{"id":"abyss-wallpaper","tag":"New","name":"Abyss Wallpaper","wide":true,"color":"neutral","category":"Backgrounds","description":"Animated blue wallpaper with soft bloom, travelling waves, film grain and vignette. Adapted from the MetalForge public wallpaper preview.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"abyss-wallpaper","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-05T22:40:51.697+00:00"},"categories":["Backgrounds"]},{"id":"verse-text","tag":"New","name":"Verse Text","wide":true,"color":"neutral","category":"Text","description":"Selectable React text that prints word by word like a misregistered comic, with CMY plates, shattered letters, halftone debris and seeded idle glitches. Includes replay, controlled frames and reduced-motion support.","sourceFiles":["Component.tsx","styles.css"],"dependencies":[],"sourceDirectory":"verse-text","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T01:36:04.67+00:00"},"categories":["Text"]},{"id":"nibble-buttons","tag":"New","name":"Buttons","wide":true,"color":"neutral","category":"Buttons","description":"Nibble's original primary, secondary and icon buttons, with Inter at the same sizes and weights, Material Symbols, native keyboard behavior, loading and toggle states.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"nibble-buttons","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T02:51:28.473+00:00"},"categories":["Buttons"]},{"id":"nibble-search-input","tag":"New","name":"Search Input","wide":true,"color":"neutral","category":"Inputs","description":"Nibble's search pill with its original Inter typography and Material Symbols, focus expansion, Ctrl/Cmd+K, clear button and Escape handling. A standalone, centered input.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"nibble-search-input","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T02:50:19.132+00:00"},"categories":["Inputs"]},{"id":"nibble-otp-input","tag":"New","name":"OTP Input","wide":true,"color":"neutral","category":"Inputs","description":"Nibble's animated OTP input with native paste and autofill, checking and error states, and a gooey merge into Verified. Includes only the code needed to try it and reset.","sourceFiles":["Component.tsx"],"dependencies":["motion"],"sourceDirectory":"nibble-otp-input","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T02:50:18.95+00:00"},"categories":["Inputs","Morph"]},{"id":"nibble-login-form","tag":"New","name":"Login Form","wide":true,"color":"neutral","category":"Forms","categories":["Forms"],"description":"Nibble's login form with its original typography, logo, Google button, email/password inputs, email-code option and account-mode switch. Provider callbacks keep authentication in your app; the preview sends no credentials or emails.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"nibble-login-form","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:03:17.615+00:00"}},{"id":"nibble-account-dropdown","tag":"New","name":"Account Dropdown","wide":true,"color":"neutral","category":"Dropdowns","categories":["Dropdowns","Glass"],"description":"Nibble's account dropdown with original typography, pixel avatar, profile, grouped actions and theme toggle. Supports keyboard navigation, Escape, outside click and async callbacks. The preview does not modify your account.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"nibble-account-dropdown","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:17:16.363+00:00"}},{"id":"liquid-glass-alert","tag":"New","name":"Glass Alert","wide":true,"color":"neutral","category":"Dialogs","categories":["Dialogs","Glass"],"description":"Glass Alert from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-alert","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:42.851+00:00"}},{"id":"liquid-glass-button","tag":"New","name":"Glass Buttons","wide":true,"color":"neutral","category":"Buttons","categories":["Buttons","Glass"],"description":"Glass Buttons from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-button","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:45.891+00:00"}},{"id":"liquid-glass-context-menu","tag":"New","name":"Glass Context Menu","wide":true,"color":"neutral","category":"Dropdowns","categories":["Dropdowns","Glass"],"description":"Glass Context Menu from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-context-menu","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:47.814+00:00"}},{"id":"liquid-glass-group","tag":"New","name":"Glass Group","wide":true,"color":"neutral","category":"Glass","categories":["Glass"],"description":"Glass Group from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-group","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:49.61+00:00"}},{"id":"liquid-glass-input","tag":"New","name":"Glass Input","wide":true,"color":"neutral","category":"Inputs","categories":["Inputs","Glass"],"description":"Glass Input from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-input","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:51.048+00:00"}},{"id":"liquid-glass-menu","tag":"New","name":"Glass Menu","wide":true,"color":"neutral","category":"Dropdowns","categories":["Dropdowns","Glass"],"description":"Glass Menu from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-menu","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:52.433+00:00"}},{"id":"liquid-glass-progress","tag":"New","name":"Glass Progress","wide":true,"color":"neutral","category":"Glass","categories":["Glass"],"description":"Glass Progress from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-progress","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:53.795+00:00"}},{"id":"liquid-glass-search","tag":"New","name":"Glass Search","wide":true,"color":"neutral","category":"Inputs","categories":["Inputs","Glass"],"description":"Glass Search from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-search","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:55.133+00:00"}},{"id":"liquid-glass-segmented-control","tag":"New","name":"Glass Segmented Control","wide":true,"color":"neutral","category":"Inputs","categories":["Inputs","Glass"],"description":"Glass Segmented Control from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-segmented-control","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:56.307+00:00"}},{"id":"liquid-glass-sheet","tag":"New","name":"Glass Sheet","wide":true,"color":"neutral","category":"Dialogs","categories":["Dialogs","Glass"],"description":"Glass Sheet from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-sheet","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:57:57.733+00:00"}},{"id":"liquid-glass-slider","tag":"New","name":"Glass Slider","wide":true,"color":"neutral","category":"Inputs","categories":["Inputs","Glass"],"description":"Glass Slider from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-slider","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:58:01.023+00:00"}},{"id":"liquid-glass-spinner","tag":"New","name":"Glass Spinner","wide":true,"color":"neutral","category":"Glass","categories":["Glass"],"description":"Glass Spinner from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-spinner","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:58:02.863+00:00"}},{"id":"liquid-glass-stepper","tag":"New","name":"Glass Stepper","wide":true,"color":"neutral","category":"Inputs","categories":["Inputs","Glass"],"description":"Glass Stepper from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-stepper","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:58:05.437+00:00"}},{"id":"liquid-glass-surface","tag":"New","name":"Glass Surface","wide":true,"color":"neutral","category":"Glass","categories":["Glass"],"description":"Glass Surface from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-surface","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:58:10.016+00:00"}},{"id":"liquid-glass-switch","tag":"New","name":"Glass Switch","wide":true,"color":"neutral","category":"Inputs","categories":["Inputs","Glass"],"description":"Glass Switch from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-switch","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:58:11.888+00:00"}},{"id":"liquid-glass-tab-bar","tag":"New","name":"Glass Tab Bar","wide":true,"color":"neutral","category":"Buttons","categories":["Buttons","Glass"],"description":"Glass Tab Bar from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-tab-bar","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T05:25:43.434+00:00"}},{"id":"liquid-glass-toolbar","tag":"New","name":"Glass Toolbar","wide":true,"color":"neutral","category":"Buttons","categories":["Buttons","Glass"],"description":"Glass Toolbar from onlymoein/liquidglass, with its original refractive glass and interactions. MIT licensed; standalone React source with embedded styles.","sourceFiles":["Component.tsx"],"dependencies":[],"sourceDirectory":"liquid-glass-toolbar","creator":{"id":"81124fe4-532e-47ef-bf9c-f70b541eab81","name":"Galavic","avatarVariant":119},"remote":{"revision":"2026-11-07T03:58:19.706+00:00"}}]