# Motion Core > Motion Core is Svelte-native motion toolkit with GSAP and Three.js powered components, demos, and CLI-driven workflows. LLM-friendly Markdown for every page is available at `/docs/raw/`; this is the source doc content without navigation chrome. Use `/sitemap.xml` for URL discovery and `/robots.txt` for crawl guidance. ## Getting Started - [Introduction](https://motion-core.dev/docs/raw/introduction): An open-source initiative exploring the intersection of motion and interface design. - [Quick Start](https://motion-core.dev/docs/raw/cli-guide/quick-start): Getting started with the Motion Core CLI. - [Init](https://motion-core.dev/docs/raw/cli-guide/init): Initialize a new Motion Core configuration. - [Add](https://motion-core.dev/docs/raw/cli-guide/add): Add a component from the registry to your project. - [List](https://motion-core.dev/docs/raw/cli-guide/list): List all available components in the registry. - [Cache](https://motion-core.dev/docs/raw/cli-guide/cache): Manage the local cache for registry data and assets. ## Resources - [Registry Changelog](https://motion-core.dev/docs/raw/changelog/registry): All notable changes to Motion Core Component Registry. - [CLI Changelog](https://motion-core.dev/docs/raw/changelog/cli): All notable changes to Motion Core CLI. ## Canvas - [ASCII Renderer](https://motion-core.dev/docs/raw/ascii-renderer): A retro-styled renderer that converts images into character-based visuals with configurable scanlines. - [Card 3D](https://motion-core.dev/docs/raw/card-3d): A 3D card with rounded corners that displays an image and responds to head tracking for a parallax effect. - [Dithered Image](https://motion-core.dev/docs/raw/dithered-image): An image display component that applies various ordered dithering algorithms (Bayer, Halftone, Void & Cluster). - [Fluid Simulation](https://motion-core.dev/docs/raw/fluid-simulation): A physics-based fluid simulation with pointer interaction. - [Glass Pane](https://motion-core.dev/docs/raw/glass-pane): A refractive view simulating moving glass rods that distort the underlying texture with chromatic aberration. - [Glass Slideshow](https://motion-core.dev/docs/raw/glass-slideshow): A slideshow component featuring organic glass bubble transitions with refraction and chromatic aberration. - [Glitter Cloth](https://motion-core.dev/docs/raw/glitter-cloth): Animated silk-like cloth shader with fine glitter noise and subtle vignette depth shading. - [Globe](https://motion-core.dev/docs/raw/globe): A Fresnel-lit globe with rim glow, haloed atmosphere, land mesh detail, and marker layers for data storytelling. - [Infinite Gallery](https://motion-core.dev/docs/raw/infinite-gallery): A 3D gallery that endlessly scrolls through textured planes with cloth-like distortion and scroll-driven transitions. - [Interactive Grid](https://motion-core.dev/docs/raw/interactive-grid): A physics-based grid simulation that distorts an image in response to cursor movement. - [Lava Lamp](https://motion-core.dev/docs/raw/lava-lamp): A smooth and organic lava lamp effect using raymarching shaders and SDFs. - [Neural Noise](https://motion-core.dev/docs/raw/neural-noise): A generative organic pattern using Compositional Pattern Producing Networks (CPPN). - [Pixelated Image](https://motion-core.dev/docs/raw/pixelated-image): A media revealer that animates blocky pixel grids which progressively sharpen to full resolution. - [Plasma Grid](https://motion-core.dev/docs/raw/plasma-grid): A fluid, pixelated noise pattern useful for backgrounds. - [Rubiks Cube](https://motion-core.dev/docs/raw/rubiks-cube): A dynamic Rubik's Cube that continuously rotates while a Fresnel rim glow traces each edge. - [Water Ripple](https://motion-core.dev/docs/raw/water-ripple): A fluid distortion effect simulating water ripples triggered by interaction. ## Layout - [Flip Grid](https://motion-core.dev/docs/raw/flip-grid): A layout component that smoothly animates its children when the grid structure changes. ## Navigation - [Floating Menu](https://motion-core.dev/docs/raw/floating-menu): A floating interaction menu with a GSAP timeline animation, featuring a cross-trigger and staggered split-text reveals. ## Pointer - [Image Trail](https://motion-core.dev/docs/raw/image-trail): An interactive effect that spawns a trail of images following the cursor with scaling and rotation. - [MacOS Dock](https://motion-core.dev/docs/raw/macos-dock): A navigation bar that simulates magnification physics and smooth easing on hover. - [Magnetic](https://motion-core.dev/docs/raw/magnetic): A wrapper that applies spring physics to elements, making them stick to the cursor on hover. ## Showcase - [Card Stack](https://motion-core.dev/docs/raw/card-stack): A stack of cards that stick to the top and scale down as you scroll. - [Logo Carousel](https://motion-core.dev/docs/raw/logo-carousel): A multi-column display that shuffles brand logos infinitely with vertical motion and fade transitions. - [Marquee](https://motion-core.dev/docs/raw/marquee): A scrolling content loop that accelerates, reverses, or syncs with scroll position. - [Radial Gallery](https://motion-core.dev/docs/raw/radial-gallery): A rotating circular gallery that creates an arch/rainbow layout, perfect for hero sections. - [Slideshow](https://motion-core.dev/docs/raw/slideshow): A full-bleed gallery featuring parallax transitions and a synchronized thumbnail navigator. - [Video Player](https://motion-core.dev/docs/raw/video-player): A refined video player component with a progress slider and smooth GSAP-powered interactions. ## Transition - [Preloader](https://motion-core.dev/docs/raw/preloader): A kinetic loading sequence that decelerates an image strip before scaling the hero asset to full screen. ## Typography - [Split Hover](https://motion-core.dev/docs/raw/split-hover): A text effect that splits characters and animates stacked layers on hover for a seamless swap. - [Split Reveal](https://motion-core.dev/docs/raw/split-reveal): A text animation component that masks content and reveals lines, words, or characters upon mounting. - [Text Loop](https://motion-core.dev/docs/raw/text-loop): A text animator that cycles through phrases with blurred vertical transitions, suitable for headlines. - [Text Scramble](https://motion-core.dev/docs/raw/text-scramble): A hover-triggered SplitText effect that scrambles characters before revealing the original string. - [Weight Wave](https://motion-core.dev/docs/raw/weight-wave): A hover-reactive text effect that smoothly increases glyph weight with a falloff across neighboring characters. ## Optional - [GitHub](https://github.com/motion-core/motion-core): Source code, issues, and discussions. - [Package](https://www.npmjs.com/package/motion-core): Installation and release metadata.