Map declarative DOM events to methods on components and targets.
Components
Ready-to-use interface and behavior solutions, grouped by the task they help accomplish. JavaScript, Twig and Liquid are delivery surfaces rather than separate component categories.
Trigger an action
Animate content
Render a custom cursor that reacts to pointer movement and hover targets.
Publish a scroll-driven, wrapping progress that CSS turns into a horizontal or circular marquee.
Animate elements declaratively with Motion and drive the playback from interactions.
Drive the Motion children of an element with its scroll progress.
Compose Motion children into a single staggered animation timeline.
Play DOM updates as view transitions declared with Motion keyframes.
Reveal elements as they enter the viewport, once or repeatedly.
Bind reactive data
Reflect reactive values into attributes, properties, classes, or text.
Derive reactive values from data exposed by a scope.
Run declarative side effects whenever scoped reactive values change.
Synchronize form controls with reactive values using declarative models.
Provide an isolated reactive data scope to descendant data components.
Show and hide content
Build accessible standalone disclosures and dynamically registered accordion groups.
Handle dragging
Add bounded pointer dragging with axis and movement controls.
Build a layout
Load content
Load and inject remote markup when the element mounts.
Fetch and replace server-rendered content with loaders and transitions.
Refresh Shopify partials while preserving client-side interaction state.
Update Shopify sections through the stable Section Rendering API.
Prefetch links through reusable interaction and visibility strategies.
Build a map
Compose declarative Mapbox maps from maps, controls, data, markers, and clusters.
Render Mapbox Static Images API URLs without loading an interactive map.
Orchestrate a Mapbox cluster into a searchable, selectable store locator.
Display media
Render responsive images with lazy loading, placeholders, and captions.
Load responsive images from Shopify CDN URLs in Liquid storefronts.
Render and optimize responsive images through the TwicPics CDN.
Render responsive videos with lazy loading, sources, and captions.
Deliver responsive video through TwicPics with optimized source URLs.
Render inline SVG icons from local files or configured icon sets.
Render icons as image sources with optional current-color support.
Navigate content
Keep anchor navigation state synchronized with sections in view.
Compose scrollable carousels from wrappers, items, controls, and drag behavior.
Compose accessible menus from toggle buttons and nested lists.
Scroll smoothly to an anchor while preserving native link behavior.
Build accessible tab lists and panels with synchronized active state.
Open an overlay
Track interactions
Declare provider-agnostic analytics events and inherited tracking context.