# 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

- [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 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

- [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.
- [Eye Tracking](https://componentry.fun/docs/components/eye-tracking): Hyper-realistic eyes that follow your cursor with smooth spring physics, reactive pupils, blinking, and multiple stunning variants.
- [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.
- [Music Player](https://componentry.fun/docs/components/music-player): A fun interactive vinyl record music player with swinging tonearm.
- [Scroll Choreography](https://componentry.fun/docs/components/scroll-choreography): A smooth, scroll-driven image choreography component using Framer Motion.
- [Scroll Split Card](https://componentry.fun/docs/components/scroll-split-card): A scroll-driven interactive card that splits into three panels and flips.
- [Signature](https://componentry.fun/docs/components/signature): An animated SVG signature effect that draws out text as if hand-written.
- [Split Flap Display](https://componentry.fun/docs/components/split-flap-display): A premium split-flap display component inspired by vintage departure boards.
- [Sticky Scroll Cards](https://componentry.fun/docs/components/sticky-scroll-cards): A scroll-driven card stack where images pin and scale as you scroll, creating a layered depth effect.


### 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

- [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.
- [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.
- [Pixel Canvas](https://componentry.fun/docs/components/pixel-canvas): Canvas where pixels react to interaction.