# Kinetik UI

> Animation and effect components for Expo and React Native, built on Reanimated, Gesture Handler and Skia. Copy them into your app with one command.

## Background

- [Aurora Veil](https://kinetik-ui.dev/components/aurora-veil.md): A slow, flowing aurora drawn by a fragment shader, for screen and hero backgrounds.
- [Grain Drift](https://kinetik-ui.dev/components/grain-drift.md): A drifting four-colour mesh gradient under moving film grain, drawn by a shader.
- [Ripple Field](https://kinetik-ui.dev/components/ripple-field.md): A dot-grid surface that ripples outward from every touch, drawn by a shader.

## Card

- [Aperture Card](https://kinetik-ui.dev/components/aperture-card.md): A card closed by a camera-like iris whose blades turn open to reveal the content.
- [Deckfall](https://kinetik-ui.dev/components/deckfall.md): A stack of cards swiped away one at a time, with the cards behind rising into place.
- [Drift Marquee](https://kinetik-ui.dev/components/drift-marquee.md): An endless row that drifts on its own; drag it to scrub, fling it, and the items lean into the speed.
- [Expand Card](https://kinetik-ui.dev/components/expand-card.md): A row that opens into a card: the thumbnail grows into a wide picture and the details rise in beneath it.
- [Fan Stack](https://kinetik-ui.dev/components/fan-stack.md): A loose pile of pictures that fans out like a hand of cards; tap one to lift it out of the fan.
- [Flip Ledger](https://kinetik-ui.dev/components/flip-ledger.md): A two-sided card that turns over in 3D, sized to the taller of its faces.
- [Fold Panel](https://kinetik-ui.dev/components/fold-panel.md): A panel that unfolds in place: the body springs to its measured height and drifts in behind it.
- [Glint Card](https://kinetik-ui.dev/components/glint-card.md): A card with a specular glint that slides with the finger or the tilt of the device.
- [Parallax Carousel](https://kinetik-ui.dev/components/parallax-carousel.md): A paging carousel whose pictures drift inside their cards as they slide, with the centre card brought forward.
- [Scroll Stack](https://kinetik-ui.dev/components/scroll-stack.md): A scroll view whose cards pin to the top and pile up, the ones beneath shrinking and dimming as more land.
- [Story Card](https://kinetik-ui.dev/components/story-card.md): Full-bleed stories with progress bars: tap to step, hold to pause, each picture drifting closer as it plays.
- [Tilt Deck](https://kinetik-ui.dev/components/tilt-deck.md): A card that tilts in 3D under the finger, with parallax layers and a drifting floor shadow.

## Interaction

- [Beam Button](https://kinetik-ui.dev/components/beam-button.md): A button with a beam of light running around its edge, leaving a soft glow that brightens on press.
- [Bloom Menu](https://kinetik-ui.dev/components/bloom-menu.md): A floating action button that blooms: the plus turns, a halo opens and actions spring out one by one.
- [Elastic Slider](https://kinetik-ui.dev/components/elastic-slider.md): A slider that stretches like rubber past its ends and springs back, with a value bubble.
- [Hold to Confirm](https://kinetik-ui.dev/components/hold-to-confirm.md): Press and hold to confirm: a ring fills around the icon and turns into a check mark.
- [Like Burst](https://kinetik-ui.dev/components/like-burst.md): A like button whose heart pops with a ring of light and a spray of sparks while the count rolls over.
- [Liquid Tabs](https://kinetik-ui.dev/components/liquid-tabs.md): A tab bar whose indicator flows like liquid, stretching, thinning and melting into place.
- [Magnet Button](https://kinetik-ui.dev/components/magnet-button.md): A button that leans toward the finger from a field around it and presses on release.
- [Morph Icon](https://kinetik-ui.dev/components/morph-icon.md): An icon button whose glyph reshapes between two states: menu to close, play to pause, plus to check.
- [Press Jelly](https://kinetik-ui.dev/components/press-jelly.md): A primary button that squashes like jelly under the finger and wobbles back on release.
- [Pulse Toggle](https://kinetik-ui.dev/components/pulse-toggle.md): A switch whose thumb stretches mid-flight, lands as a rounded square and pulses when it turns on.
- [Slide to Confirm](https://kinetik-ui.dev/components/slide-confirm.md): Drag the knob across to confirm. A trail follows it, light sweeps the track, and it lands as a check.
- [Status Button](https://kinetik-ui.dev/components/status-button.md): A button that folds into a spinner while it works, then opens in green with a traced check, or shakes in red.
- [Two-Step Button](https://kinetik-ui.dev/components/two-step-button.md): A button that asks before it acts: it splits into Cancel and Confirm, and the question closes by itself.

## Text

- [Marker Highlight](https://kinetik-ui.dev/components/marker-highlight.md): A paragraph where key phrases get marked as if with a highlighter, the ink sweeping in phrase by phrase.
- [Odometer](https://kinetik-ui.dev/components/odometer.md): A number whose digits roll like a mechanical counter, forward or back, the long way round.
- [Scramble Text](https://kinetik-ui.dev/components/scramble-text.md): Characters cycle through random glyphs and lock into place from left to right.
- [Shine Text](https://kinetik-ui.dev/components/shine-text.md): A line of text with a band of light sweeping across the glyphs.
- [Typewriter](https://kinetik-ui.dev/components/typewriter.md): Text typed out with a human rhythm; several phrases are typed, held, erased and replaced in turn.
- [Word Cascade](https://kinetik-ui.dev/components/word-cascade.md): A paragraph that arrives word by word, each word rising into place after the last.
- [Word Rotator](https://kinetik-ui.dev/components/word-rotator.md): A line with one word that keeps changing, rolling out and in letter by letter while its gap springs to fit.

## Navigation

- [Dock Bar](https://kinetik-ui.dev/components/dock-bar.md): A floating bottom navigation bar whose items swell under the finger like a dock.
- [Morph Sheet](https://kinetik-ui.dev/components/morph-sheet.md): A bottom sheet with snap points that morphs from a floating card into a full sheet and blurs the screen behind.
- [Parallax Header](https://kinetik-ui.dev/components/parallax-header.md): A scroll view whose header artwork scrolls at half speed, stretches on pull and hands off to a compact bar.

## Feedback

- [Confetti Burst](https://kinetik-ui.dev/components/confetti-burst.md): A burst of confetti drawn as one Skia Atlas, with physics on the UI thread.
- [Skeleton Sweep](https://kinetik-ui.dev/components/skeleton-sweep.md): Loading placeholders with one band of light sweeping across the whole layout.
- [Toast Stack](https://kinetik-ui.dev/components/toast-stack.md): Notifications that stack like cards, fan out on tap and swipe away sideways.

## Data

- [Activity Rings](https://kinetik-ui.dev/components/activity-rings.md): Concentric progress rings that wind up one after another; a ring past its goal laps itself.
- [Bar Chart](https://kinetik-ui.dev/components/bar-chart.md): Bars that spring up in a wave; drag across them and the one under the finger stays bright with its value.
- [Donut Chart](https://kinetik-ui.dev/components/donut-chart.md): A ring of rounded slices that sweeps in; tap a slice to bring it forward and read its share in the middle.
- [Gauge Meter](https://kinetik-ui.dev/components/gauge-meter.md): A dial that swings to its value on a spring while the figure counts up beneath it.
- [Heat Grid](https://kinetik-ui.dev/components/heat-grid.md): A calendar grid of days shaded by activity; the cells pop in as a wave and a drag reads any day.
- [Line Chart](https://kinetik-ui.dev/components/line-chart.md): A smooth line chart that draws itself in; drag across it and a guide, a dot and a label follow the finger.
- [Radar Chart](https://kinetik-ui.dev/components/radar-chart.md): A radar chart whose shapes grow from the centre and morph to new values; tap the legend to compare.
- [Stat Card](https://kinetik-ui.dev/components/stat-card.md): A key figure that counts up, with a change pill and a sparkline that draws itself in.

## Screens

- [Onboarding Flow](https://kinetik-ui.dev/components/onboarding-flow.md): A paged welcome flow: spotlit illustrations that drift with the swipe, story-style progress, a button that grows.
- [Paywall](https://kinetik-ui.dev/components/paywall.md): A subscription screen with a drifting gradient hero, rolling plan prices and confetti on purchase.
- [Player Sheet](https://kinetik-ui.dev/components/player-sheet.md): A music library whose mini player opens into a full player: tilting cover, elastic scrubber.
- [Profile Hero](https://kinetik-ui.dev/components/profile-hero.md): A profile screen: parallax cover, follow button with a rolling count, liquid tabs and loading skeletons.