# Componentry

> Componentry is a collection of beautifully-designed, accessible components and visual effects. It is built with TypeScript, Tailwind CSS, and Framer Motion. Open Source. Copy and paste into your apps.

## Overview
- [Introduction](https://componentry.fun/docs): Getting started with Componentry.
- [MCP](https://componentry.fun/docs/mcp): Getting started with Componentry.

## Components

### Text Animations

- [Hyper Text](https://componentry.fun/docs/components/hyper-text): A text scramble effect that cycles through characters before revealing the final text. Inspired by cyberpunk and futuristic UIs.
- [Letter Cascade](https://componentry.fun/docs/components/letter-cascade): Kinetic text animation where letters scatter outward with spring physics and blur, then elegantly reassemble.
- [Particle Typography](https://componentry.fun/docs/components/cursor-driven-particle-typography): Renders dynamic typography constructed entirely from particles that elegantly disperse and reassemble upon cursor interaction using spring physics.
- [Text Animate](https://componentry.fun/docs/components/text-animate): Animate text characters with staggered delays and effects.
- [Text Repel](https://componentry.fun/docs/components/text-repel): Physics-based text where each letter reacts to cursor proximity with spring dynamics, creating an interactive magnetic force-field effect.
- [Velocity Scroll](https://componentry.fun/docs/components/scroll-based-velocity): Text that moves horizontally based on scroll speed.


### Components

- [Auth Modal](https://componentry.fun/docs/components/auth-modal): Beautiful authentication modal with transitions.
- [Circuit Board](https://componentry.fun/docs/components/circuit-board): Animated circuit board visualization with nodes and connections.
- [Collection Surfer](https://componentry.fun/docs/components/collection-surfer): Smooth surfing interaction for browsing collections.
- [Command Menu](https://componentry.fun/docs/components/command-menu): Fast, accessible, and composable command menu for React.
- [Flight Status Card](https://componentry.fun/docs/components/flight-status-card): A detailed card showing flight information with animations.
- [Github Calendar](https://componentry.fun/docs/components/github-calendar): GitHub-style contribution calendar heatmap.
- [Layered Stack](https://componentry.fun/docs/components/layered-stack): A stack of layered cards that interact with mouse hover.
- [Mac Keyboard](https://componentry.fun/docs/components/mac-keyboard): A realistic Mac keyboard component with interactive keys and detailed styling.
- [Magnetic Dock](https://componentry.fun/docs/components/magnetic-dock): MacOS style dock that scales items based on mouse proximity.
- [Scroll Choreography](https://componentry.fun/docs/components/scroll-choreography): A smooth, scroll-driven image choreography component using Framer Motion.
- [Scrub Input](https://componentry.fun/docs/components/scrub-input): An inline interactive slider styled as a pill.
- [Showcase Card](https://componentry.fun/docs/components/showcase-card): Card component for showcasing projects or features.
- [Signature](https://componentry.fun/docs/components/signature): An animated SVG signature effect that draws out text as if hand-written.
- [Spotlight Card](https://componentry.fun/docs/components/spotlight-card): A card that reveals a spotlight effect on hover.
- [Testimonial Marquee](https://componentry.fun/docs/components/testimonial-marquee): Infinite scrolling marquee for testimonials.


### Hero Backgrounds

- [Animated Gradient](https://componentry.fun/docs/components/animated-gradient): A beautiful, animated, and customizable WebGL gradient with noise capabilities.
- [Closing Plasma](https://componentry.fun/docs/components/closing-plasma): Plasma field tailored for footer and CTA sections with premium atmospheric motion.
- [Dither Prism Hero](https://componentry.fun/docs/components/dither-prism-hero): Stunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
- [Hero Geometric](https://componentry.fun/docs/components/hero-geometric): Geometric shapes and patterns for hero sections.
- [WebGL Liquid](https://componentry.fun/docs/components/webgl-liquid): Cinematic liquid shader hero with premium gradients, configurable reveal timing, and advanced flow controls.


### Visual Effects

- [Border Beam](https://componentry.fun/docs/components/border-beam): Animated beam of light traveling along the border.
- [Dither Gradient](https://componentry.fun/docs/components/dither-gradient): Gradient background with dithering noise.
- [Image Ripple Effect](https://componentry.fun/docs/components/image-ripple-effect): WebGL-powered cursor ripples that displace layered image cards in real time.
- [Image Trail](https://componentry.fun/docs/components/image-trail): Leaves a trail of images behind the cursor with a premium delay fade.
- [Infinite Image Field](https://componentry.fun/docs/components/infinite-image-field): An endless, cursor-driven photo canvas that tiles images infinitely and pans fluidly toward wherever you move your cursor.
- [Liquid Blob](https://componentry.fun/docs/components/liquid-blob): Animated liquid blob shape.
- [Magnet Lines](https://componentry.fun/docs/components/magnet-lines): Lines that react to cursor movement like a magnetic field.
- [Matrix Rain](https://componentry.fun/docs/components/matrix-rain): Classic Matrix digital rain effect.
- [Noise Texture](https://componentry.fun/docs/components/noise-texture): Subtle noise texture overlay.
- [Particle Galaxy](https://componentry.fun/docs/components/particle-galaxy): Interactive 3D particle system resembling a galaxy.
- [Pixel Canvas](https://componentry.fun/docs/components/pixel-canvas): Canvas where pixels react to interaction.