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
Lay out and animate repeating text around a circular path.
Render a custom cursor that reacts to pointer movement and hover targets.
Build timeline-driven scroll animations from parent and target components.
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 an accessible collection of independently expandable sections.
Build accessible standalone disclosures and dynamically registered accordion groups.
Handle dragging
Add bounded pointer dragging with axis and movement controls.
Build a layout
Compose hero sections with media, text, actions, and flexible positioning.
Render structured lists of icons, labels, and optional actions.
Arrange image collections in a reusable Twig grid composition.
Scale and repeat oversized text to fill its available width.
Render reassurance lists with icons and an optional mobile slider layout.
Keep content sticky while exposing its active position state.
Load content
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.
Build server-rendered navigation frames with triggers, targets, and loaders.
Load and inject remote markup when an include enters the viewport.
Prefetch links through reusable hover 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.
Scroll smoothly to an anchor while preserving native link behavior.
Compose scrollable carousels from wrappers, items, controls, and drag behavior.
Compose accessible menus from toggle buttons and nested lists.
Compose indexed sliders from items, controls, dots, drag, and progress.
Build accessible tab lists and panels with synchronized active state.
Open an overlay
Coordinate native dialogs, delegated triggers, and optional transitions.
Open modal overlays with optional transition-aware behavior.
Open a positioned off-canvas panel from an overlay.
Announce toasts from live regions with pausable auto-dismiss and animated stacking.
Track interactions
Declare provider-agnostic analytics events and inherited tracking context.