Premium signature sections

These sections are Hyprism’s distinctive features — the parts that separate the theme from generic Shopify themes. They’ve each received careful design, performance, and a11y treatment.

• Hotspot Image — interactive shopping experience layered on a single image
• Bento Grid — modern bento-style content layout with 6 tile types
• Quick View — modal product preview with variant picker and ATC
• Sticky Product Bar — mobile-first persistent add-to-cart bar

Award motion family (9.5–9.10) — cinematic, scroll- and cursor-reactive sections. They’re driven by a lightweight requestAnimationFrame scroll driver (rather than CSS scroll-timeline, which is still unreliable inside the Shopify theme editor and in Firefox), so the motion runs consistently everywhere — theme editor, live storefront, every modern browser, desktop and mobile. Scroll/touch listeners are passive and the work is throttled to one frame. Every one degrades gracefully: with prefers-reduced-motion: reduce the driver bails and the section renders as a clean, fully-legible static layout.

• Scrollytelling reveal — pinned media stage with a progressive product reveal
• Kinetic headline — per-word scrubbed display headline
• Scroll parallax scene — full-bleed depth layers that move at different rates
• Drag gallery — pointer-drag gallery with momentum + cursor parallax
• Cursor FX — cursor-follow spotlight / glow + magnetic buttons (X-ray family)
• Horizontal lookbook — vertical scroll drives horizontal panel travel

Collection switcher (9.11) — an editorial product grid that swaps between collections via a coverflow / glass-box header.

Bento Hero (9.12) — a hero-scale bento grid whose every cell is a free slot for any block (headings, Shape, Box, Coverflow, video, …).

9.1 Hotspot Image (hotspot-image)

The Hotspot Image is an image with interactive dots placed on it. Click or hover a dot, and a card appears showing a product or custom content. Used for shoppable lookbooks, room/scene merchandising, “shop the look” lifestyle imagery.

Available on: any template except password.

Section-specific settings

Setting	What it does
🔧 Image	The background image. Typically a lifestyle/scene photo with multiple products visible.
🔧 Section heading	Optional heading shown above the image.
🔧 Section text	Optional rich-text paragraph shown below the heading (and above the image).
🔧 Overlay opacity	Range 0–80%, step 5. ✅ Default 0%. Dim the image to make hotspots pop visually.
🔧 Image corner radius	Range 0–48px, step 2. ✅ Default 0.
🔧 Image inset	Range 0–80px, step 4. ✅ Default 48px. Padding around the image inside the section bounds. When 0, the image extends to section edges and its corner radius coalesces with the section radius (Rule 215).
🔧 Glass shine (enable_image_shine)	✅ Default off. Adds the button-style top-highlight light-bar over the main image (follows the image’s rounded corners). pointer-events:none so the hotspot dots stay clickable.

There is no “Aspect ratio” setting on the section — the image’s natural ratio is used directly. There is no “default dot style” or “default card position” on the section either; both are per-hotspot-block settings (see below).

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

hotspot · hotspot-hero

The hotspot block is the interactive dot (one per hotspot). The hotspot-hero block is a stationary content overlay anchored to one of 9 positions on the image — see below. Both blocks have their own settings tables; here’s the highlights.

Hotspot block (hotspot)

Each hotspot is a dot placed on the image with x/y coordinates as percentages.

Position

Setting	What it does
🔧 X position	Range 0–100%, step 1. ✅ Default 50%. Horizontal position.
🔧 Y position	Range 0–100%, step 1. ✅ Default 50%. Vertical position.

Content (shown inside the card when the dot is clicked/hovered)

Setting	What it does
🔧 Product	Optional product picker — populates the card with product details.
🔧 Custom heading	Used when no product is picked.
🔧 Custom text	Textarea. Body text shown in the card.
🔧 Link	URL the card content links to.
🔧 Link text	✅ Default Learn more. Visible CTA text inside the card.
🔧 Text alignment	Left (✅ default) / Center / Right.
🔧 Heading font	Heading (✅ default) / Subheading / Body / Accent.

Dot appearance

Setting	What it does
🔧 Dot shape	Circle (✅ default) / Square / Rounded square.
🔧 Dot color	Accent (✅ default) / Bg (scheme background) / Custom.
🔧 Dot custom color	✅ Default #6366f1. Visible when dot color = Custom.
🔧 Dot size	Range 16–56px, step 2. ✅ Default 32px.
🔧 Dot glass	✅ Default off. Frosted-glass surface on the dot.
🔧 Dot pulse	✅ Default on. Animated pulse ring around the dot.
🔧 Dot numbered	✅ Default off. Renders a sequential number (1, 2, 3…) inside each dot.

Card behaviour

Setting	What it does
🔧 Card position	Auto (✅ default — smart position based on dot zone) / Top / Bottom / Left / Right / Top-left / Top-right / Bottom-left / Bottom-right.
🔧 Card open effect	Fade (✅ default) / Slide (24px directional, matches position) / Scale (0.8 → 1) / None (instant).
🔧 Open on hover	✅ Default off. When on, card opens on hover (desktop). Mobile is always click.
🔧 Card show quick add	✅ Default on. (For product cards) Display “Add to cart” inside the hotspot card.
🔧 Show colour swatches (card_show_swatches)	✅ Default off. (For product cards) Shows up to 5 colour dots on the hotspot card when the product has a Color / Colour / Farbe option. A +N chip indicates additional colours beyond the first five.
🔧 Card glass	✅ Default off.
🔧 Tint glass with accent (card_glass_tint)	✅ Default off. Tints the hotspot card’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Card glass is on.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.
🔧 Card close-button shape	Circle (✅ default) / Rounded / Square / Bare (no backplate) / None (no close button — Esc + outside-click only).

Mobile experience

On mobile, the card-position settings are ignored — the card always opens as a bottom-sheet from below (Apple Maps, modern banking apps pattern). Visitor taps dot → card slides up → tap outside or close-button to dismiss.

Hotspot-hero block (hotspot-hero)

A stationary content overlay anchored to one of 9 positions on the image — like a built-in hero card layered on the hotspot image. Compose with nested atom blocks (heading + text + button + icon).

Setting	What it does
🔧 Position	9 anchor points: top-left / top-center / top-right / center-left / center / center-right / bottom-left (✅ default) / bottom-center / bottom-right.
🔧 Max width	Range 200–800px, step 20. ✅ Default 480px.
🔧 Text alignment	Inherit (✅ default) / Left / Center / Right.
🔧 Background	Transparent / Scrim (✅ default — gradient scrim) / Glass / Scheme.
🔧 Corner radius	Range 0–32px, step 2. ✅ Default 12px.
🔧 Accent glow	✅ Default off.
🔧 Drop shadow	✅ Default off.
🔧 Use global scheme	✅ Default on.
🔧 Color scheme	Visible when use_global_scheme is off.
🔧 Mobile layout	Overlay (content over image) / Above (content stacks above the image band) / Below (✅ default).

Accepted nested blocks: heading · text · button · icon · image · group · divider · spacer

This is what differentiates Hotspot Image from a plain image — you can compose a complete hero experience (hero content + product hotspots) on one image, all in one section.

Common use cases

• ✅ Lookbook page — model wearing 5 products; click hotspots to shop each piece
• ✅ “Shop the room” interior decor — a room photo with chair/lamp/rug as hotspots
• ✅ Editorial home page hero — hero card with brand statement + 3 featured products as hotspots
• ✅ Holiday gift guide — group of products in scene with hotspots labeled “$50–$100”, “$100–$200”

9.2 Bento Grid (bento-grid)

Modern bento-box-style layout — a flexible grid where each tile can span multiple cells. Used for visual landing pages, brand pages, “feature highlights” with rich visual hierarchy.

Available on: any template except password.

Grid geometry

Setting	What it does
🔧 Columns (desktop)	Range 4–12, step 1. ✅ Default 6.
🔧 Columns (mobile)	Range 1–4, step 1. ✅ Default 2.
🔧 Grid gap	Range 0–32px, step 2. ✅ Default 12px. Space between tiles.
🔧 Tile min-height	Range 120–400px, step 10. ✅ Default 220px. Base row height — each tile occupies at least this height.
🔧 Content alignment	Left (✅ default) / Center / Right — default text alignment inside each tile (per-tile override possible).
🔧 Lock aspect ratio	✅ Default off. When on, each tile’s aspect = col-span : row-span (e.g. 2×2 = square, 4×2 = wide rectangle) — keeps proportional rendering across viewports independent of tile_min_height.
🔧 Section padding X	Range 0–80px, step 4. ✅ Default 24px. Section’s own side-padding. Set to 0 for edge-to-edge tiles.

There is no “Section heading” setting on the section — add a heading block above the bento-tile blocks if you want a heading.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

bento-tile only — up to 24 tiles per section. Each tile gets its own configuration (tile type, col-span, row-span, content, surface, hover effect, etc.) — see the bento-tile block reference in Phase 3.

Bento-tile block (bento-tile)

A single tile inside the Bento Grid (above). Each tile picks one of 6 content types + sets its own grid spans + styling.

Content type + content source

Setting	What it does
🔧 Tile type	Image (✅ default) / Product / Collection / Video / Content (nested @theme blocks) / Blank (pure surface tile).
🔧 Image	Image picker (image type).
🔧 Image link	URL the image links to (image type).
🔧 Image overlay text	Optional text overlaid on the image (image type).
🔧 Product	Product picker (product type).
🔧 Show quick add	✅ Default on (product type).
🔧 Collection	Collection picker (collection type).
🔧 Show count	✅ Default off (collection type).
🔧 Video	Shopify-hosted video upload (video type).
🔧 Video URL	YouTube / Vimeo URL (video type, alternative to upload).
🔧 Video autoplay	✅ Default on (video type).

Spans (desktop)

Setting	What it does
🔧 Col span (desktop)	Range 1–12, step 1. ✅ Default 2. Number of grid columns this tile spans.
🔧 Row span (desktop)	Range 1–6, step 1. ✅ Default 1. Number of grid rows.

Spans (mobile)

Setting	What it does
🔧 Col span (mobile)	Range 1–4, step 1. ✅ Default 1.
🔧 Row span (mobile)	Range 1–4, step 1. ✅ Default 1.

Style

Setting	What it does
🔧 Tile surface	Solid (✅ default) / Glass / Transparent / Image-fill (image fills tile, content overlays with scrim).
🔧 Overlay text colour (image_fill_text)	Image-fill only. Auto (✅ default — white text + a dark scrim for legibility over any photo) / Color scheme (the tile follows the scheme text colours — best over light or controlled imagery).
🔧 Tint glass with accent (tile_glass_tint)	✅ Default off. Tints the tile’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Tile surface = Glass.
🔧 Tile corner radius	Range 0–48px, step 2. ✅ Default 16px.
🔧 Tile hover effect	None / Lift (✅ default) / Zoom / Tilt (3D perspective, cursor-following) / Glow-pulse.
🔧 Tile glow	✅ Default off.
🔧 Tile shadow	✅ Default off.

Accepted nested blocks (when tile type = Content)

heading · text · button · icon · image · group · divider · spacer

Common use cases

• Brand landing page — 1 image-hero tile + 3 collection tiles + 1 video tile + 1 content tile
• Holiday campaign — One big featured-product tile (4×2) plus 4 supporting tiles
• About page — Mixed content tiles + image tiles telling a brand story

9.3 Quick View (quick-view + theme settings)

A modal product preview that opens without navigating away from the current page. Visitor sees product details, picks variants, adds to cart — all without leaving the listing or article they were on.

Quick View is not a section — it’s a globally-enabled feature that adds a “Quick view” trigger to every product card across the theme.

Theme settings (Theme settings → Quick view)

The tab has 3 subheaders: Trigger button, Modal, Effects. All settings below are gated by Enable quick view — turn off the master toggle and the rest of the tab hides.

Setting	What it does
🔧 Enable quick view	Master toggle. ✅ Default on. When off, the quick-view button is suppressed everywhere and the modal cannot be opened.
🔧 Disable on mobile (quick_view_disable_mobile)	✅ Default off. When on, the quick-view button is hidden on phones (≤749px) — tapping a product image opens the product page instead of the modal.
🔧 Always show icon on mobile (quick_view_show_icon_mobile)	✅ Default off. When on, the quick-view icon stays visible on phones (instead of hover-only) so shoppers can tell a tap opens the quick view, not the product page. Only available when Disable on mobile is off.
🔧 Trigger style	Icon (✅ default — just the eye icon), Icon + text (icon followed by “Quick view” label), or Text (label only).
🔧 Trigger position	Top-right / Top-left / Bottom-right / Bottom-left / Center (✅ default — renders dead-centre on hover with a subtle slide-in animation; cleanest look).
🔧 Glass background on trigger	✅ Default on. When on, the trigger button gets a frosted-glass backplate so it stays readable on busy product images. When off, the trigger floats over the image with no backdrop.
🔧 Tint glass with accent (quick_view_glass_tint)	✅ Default off. When on (and the modal is glass-surfaced), the modal glass takes an accent tint (strength = Effects → Glass tint intensity). Only visible when Glass background on trigger is on.
🔧 Modal surface (quick_view_surface)	Modal subheader. Solid / Glass (✅ default) / Glass + accent tint — the surface of the modal itself, theme-authoritative (independent of the card that opened it). See Surface + color scheme below.
🔧 Inherit card surface (quick_view_inherit_card)	✅ Default off. When on, the modal instead mirrors the surface and color scheme of the product card that triggered it (the legacy “card expands into the modal” continuity effect). Mutually exclusive with Use custom color scheme.
🔧 Use custom color scheme (quick_view_use_custom_scheme)	✅ Default off. When on, the modal uses a color scheme you pick below — overrides both the theme surface and card-inherit.
🔧 Modal color scheme (quick_view_color_scheme)	The scheme used when Use custom color scheme is on and the global dark/light toggle is off.
🔧 Modal color scheme — dark / light (quick_view_color_scheme_dark / _light)	Dark- and light-mode scheme pair, used when Use custom color scheme is on and the global dark/light toggle is active (the modal swaps with the mode).
🔧 Image aspect ratio	Aspect ratio of the modal’s primary image. Options: Natural (the image’s own ratio, no crop), 1:1 (square), 4:5 (portrait, ✅ default), 3:4, 2:3, 4:3 (landscape), 16:9.
🔧 Show express payment buttons	✅ Default off. When on, the modal renders Shop Pay / PayPal / Apple Pay / Google Pay buttons below the Add-to-cart (only providers the merchant has enabled in Shopify Payments will appear).
🔧 Accent glow	✅ Default off. When on, an accent-colored glow surrounds the modal. Scaled by the global Section glow intensity in Effects.
🔧 Drop shadow	✅ Default off. When on, a soft drop-shadow sits underneath the modal. Scaled by the global Section shadow intensity in Effects.

What’s inside the modal

The Quick View modal shows:

• Primary image with thumb-strip navigation
• Image chevron-arrows (prev/next)
• Vendor (optional)
• Title
• Price (with sale + compare-at)
• Description
• Variant picker (radios or pills)
• Quantity selector
• Add to cart button (+ optional express checkout)
• Wishlist heart (corner of the image)
• “View full details” link → product page

It’s essentially a compact version of the product page, rendered via AJAX-section-rendering when the visitor clicks Quick View.

Surface + color scheme

By default the modal surface is theme-authoritative — you set it once via Modal surface (quick_view_surface), independent of which card opened it. Three layered options decide the modal’s look, highest priority first:

1. Custom scheme (quick_view_use_custom_scheme on) — the modal uses your picked scheme (or the dark/light pair when the global toggle is active).
2. Inherit from card (quick_view_inherit_card on) — the modal mirrors the surface and color scheme of the triggering card (the “card expands into the modal” continuity effect). This was the old always-on behaviour; it is now opt-in.
3. Theme surface (neither toggle on, ✅ default) — the modal uses Modal surface (Solid / Glass / Glass + accent tint).

Backdrop

The modal sits over a backdrop that combines:

• A dim color (configurable via the cart-drawer overlay opacity, shared)
• A blur (configurable via the cart-drawer overlay blur, shared)

So all overlays (cart-drawer, quick-view, lightbox) share the same backdrop appearance for consistency.

Performance

Quick View fetches /products/{handle}.js (JSON) for variant data and /products/{handle}?section_id=quick-view (HTML) for the section markup. The product is cached client-side — opening the same product a second time is instant.

When the modal opens, Hyprism preloads all gallery image variants in the background so thumb-clicks and prev/next swap instantly with no loading flicker.

9.4 Sticky Product Bar (sticky-product-bar snippet)

A mobile-first persistent bar that appears once the visitor scrolls past the main add-to-cart button on a product page. Holds a mini image, title, price, optional variant picker, optional quantity selector, and add-to-cart button.

Like Quick View, this is not a section — it’s a globally-enabled feature on product pages.

Theme settings (Theme settings → Sticky product bar)

The tab has 3 subheaders: Content, Appearance, Behavior. All settings below are gated by Enable sticky product bar.

Setting	What it does
🔧 Enable sticky product bar	Master toggle. ✅ Default on.
🔧 Show image	✅ Default on. Mini product image (48×48 on mobile, 60×60 desktop).
🔧 Show variant picker	✅ Default on. Compact dropdown for variant selection. Only renders for multi-variant products — single-variant products show no picker even when the setting is on.
🔧 Show quantity	✅ Default on. +/- quantity spinner.
🔧 Full width	✅ Default on (boolean — not a select with options). When on, the bar spans the full viewport edge-to-edge. When off, the bar respects the page-grid content column so it aligns with section content above.
🔧 Glass background	✅ Default off. When on, the bar gets a frosted-glass surface (reads the theme-wide Glass settings from §2.7).
🔧 Tint glass with accent (sticky_bar_glass_tint)	✅ Default off. Tints the bar’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Glass background is on.
🔧 Accent glow	✅ Default off. Accent-colored glow above the bar. Scaled by the global Section glow intensity in Effects.
🔧 Drop shadow	✅ Default off. Soft shadow above the bar to lift it visually from content. Scaled by the global Section shadow intensity in Effects.
🔧 Show until (ms)	Range 0–5000ms, step 250. ✅ Default 0. When set to 0, the bar stays visible the entire time the main ATC is out of viewport. Set higher to auto-hide after N milliseconds even if the ATC is still off-screen — useful if you want the bar to be a quick reminder rather than a persistent fixture.

Behavior

• Uses an IntersectionObserver on the product page’s main ATC button.
• When the ATC scrolls out of viewport, the bar slides up from the bottom (or fades in if prefers-reduced-motion is set).
• When the visitor scrolls back to the ATC, the bar slides away.
• Bar’s variant picker and quantity stay synchronized with the main form (bidirectional sync via MutationObserver).
• Tapping the bar’s add-to-cart button triggers /cart/add.js and dispatches ne:cart-updated (cart drawer opens automatically).

Mobile layout

On mobile (≤749px), the bar uses a 3-row grid:

• Row 1: image + product info (title, price)
• Row 2: variant picker + quantity
• Row 3: add-to-cart button (full width)

Adaptive — if there’s no image / no variant / no quantity setting, the rows collapse with CSS-:has() rules.

Reduce-motion respect

@media (prefers-reduced-motion: reduce) deactivates the slide animation — the bar fades in/out instead. Mandatory for accessibility.

Performance

• The bar is body-mounted via JS on init (escapes any parent transform/will-change/filter ancestors that would create a containing-block).
• IntersectionObserver is the only ongoing cost — efficient compared to scroll listeners.
• Variant sync polls only on DOM mutation (not interval) — zero cost when idle.

9.5 Scrollytelling reveal (scrollytelling)

A pinned media stage that progresses through steps as the visitor scrolls — Apple-style progressive product reveal. The shared media column stays pinned and crossfades to each step’s image/product while the step text scrolls beside it. Nothing in the Theme Store catalog does this. Flagship of the motion family.

Available on: any template except password.

Engine: position: sticky + IntersectionObserver. The pin is rock-solid across every browser (including Firefox and older Safari) — the scroll-driven CSS wedge is reserved for 9.6/9.7 where degradation is invisible.

Section-specific settings

Setting	What it does
🔧 Heading / Subheading	Optional intro shown above the pinned stage (H2 + rich text).
🔧 Content alignment	Left (✅ default) / Center / Right — alignment of the intro heading/subheading.
🔧 Media position	Left (✅ default) / Right — which side the pinned media sits on (desktop).
🔧 Media width	Range 40–60%, step 2. ✅ Default 50%. Width of the media column.
🔧 Scroll length per step	Range 40–130vh, step 5. ✅ Default 90vh. How far you scroll before the next step activates — lower values make the steps sit tighter, with less empty space between them.
🔧 Pin offset from top	Range 0–160px, step 4. ✅ Default 24px. Increase if a sticky header overlaps the pinned media.
🔧 Media transition	Crossfade (✅ default) / Slide / Scale — how the media swaps between steps.
🔧 Side-swap animation style	Slide (✅ default) / Fade / None — only active when steps alternate sides (see Blocks accepted): how the pinned media animates as it moves to the active step’s side.
🔧 Layout mode	Split (✅ default — media one side, steps beside it) / Overlay — steps float over the full-bleed media.
🔧 Media ratio	Auto (✅ default) / Portrait / Square / Landscape / Wide.
🔧 Center media in viewport	✅ Default off. When on, the media enters directly under the heading (no empty gap above it), rises as you scroll, then pins vertically centred on screen and releases with the last step. (The stage is media-height with a JS-computed centred offset, so the alternating-sides slide keeps working.)
🔧 Media surface	Solid (✅ default) / Glass / Transparent, plus Tint glass with accent. The pinned media card’s surface.
🔧 Media corner radius	Range 0–48px, step 2. ✅ Default 16.
🔧 Step text animation	None (✅ default) / Fade / Fade up / Fade down / Scale / Blur — how each step’s text enters as it activates.
🔧 Step corner radius	Range 0–48px, step 2. ✅ Default 16. Rounding of the step text card.
🔧 Show progress dots	✅ Default on. Clickable dots (one per step) that scroll the matching step into view (role=tab, aria-selected).
🔧 Progress dots position	Right (✅ default) / Left / Bottom.
🔧 Price chip — style / text / tint / glow	Styles the product price chip over the media: style Glass (✅) / Dark / Accent, text White (✅) / Dark / Accent, plus accent tint and glow.

Effects + chrome + color scheme

Standard v7 chrome — transparent background, glass (+ accent tint), accent glow, drop shadow, section color scheme (with dark/light pair), full-width (+ mobile), corner radius, padding, and visibility (hide on mobile / desktop) toggles.

Blocks accepted

step — up to 8 steps. Each step: Eyebrow, Heading (H3), Text (rich text), Button (label + link, themed .ne-btn--primary), an optional Icon (position Above / Inline, color Original / Accent / Heading), plus Image and/or Product. If a product is set (and no image), its image is used; with Show price chip on (✅ default) a price chip overlays the media and links to the product. Each step also has a Horizontal position (Inherit from section ✅ / Left / Right) — override it on any step to switch on the alternating-sides reveal: the pinned media stage then slides to each active step’s side (animation set by Side-swap animation style above). With every step left on Inherit, the section keeps its plain two-column layout.

Mobile experience

The media stage becomes a sticky banner (52svh) at the top; the steps scroll beneath it full-width. One DOM, no duplication.

Common use cases

• ✅ Product feature walkthrough — pin a product photo, reveal 3–4 feature steps beside it
• ✅ Brand story — pin lifestyle imagery, narrate the brand across steps
• ✅ How-it-works — pin a process image, step through the stages

9.6 Kinetic headline (kinetic-headline)

A large display headline that animates as it scrolls into view — either a scrubbed per-word cascade (Rise / Fade / Tracking) or a Scramble decode where the words decode front-to-back, one word at a time (random characters cycling, then locking to the target). Font-agnostic (uses transform / opacity / letter-spacing, not variable-font axes), so it works with any merchant font.

Available on: any template except password.

Section-specific settings

Setting	What it does
🔧 Heading	The headline text.
🔧 Heading tag	H1 / H2 (✅ default) / H3 / Paragraph — semantic level for SEO/a11y.
🔧 Subheading	Optional inline rich text below the headline.
🔧 Button label / link	Optional themed button.
🔧 Font role	Heading (✅ default) / Subheading / Body / Accent — which theme font.
🔧 Font size (desktop max)	Range 32–180px, step 2. ✅ Default 88px. Scales down responsively (clamp).
🔧 Line height	Range 0.9–1.6, step 0.1. ✅ Default 1.1.
🔧 Uppercase	✅ Default off.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Reveal effect	Rise (✅ default — translateY + blur) / Fade / Tracking (whole-line letter-spacing scrub) / Scramble (decode) / None.
🔧 Scramble mode	Scramble only. Once on scroll-in (✅ default) / Endless loop. Hidden unless the effect is Scramble.
🔧 Animation length	Scramble only. Range 2–12, step 1. ✅ Default 5. How long the whole word-by-word decode takes — higher = slower / longer (the total time is spread across the words, so it stays consistent regardless of word count).
🔧 Word stagger	Range 0–12, step 1. ✅ Default 6. How much each word lags the previous one (Rise / Fade / Tracking only — hidden for Scramble / None).
🔧 Hover effect	Per-word micro-interaction on pointer hover: None (✅ default) / Accent / Glow / Weight / Lift / Tracking / Skew / Underline.

Effects + chrome + color scheme

Standard v7 chrome — transparent background, glass (+ accent tint), accent glow, drop shadow, section color scheme (with dark/light pair), full-width (+ mobile), corner radius, padding, and visibility (hide on mobile / desktop) toggles.

Motion + degradation

• Rise / Fade / Tracking are CSS scroll-driven (view-timeline); on browsers without scroll-timeline support they show the static headline.
• Scramble runs on a tiny JS engine + IntersectionObserver, so it animates everywhere (editor, live, every modern browser), decoding the words front-to-back over the chosen Animation length. The decoded text is the real, accessible headline (the engine sets aria-label, so screen readers always read the final wording, not the scrambled characters). Scrambling characters are tinted with the scheme accent.
• With reduced motion every mode renders the fully-legible static headline — no flash of invisible or garbled text.

Reusable as a block. The whole headline animation is also a standalone Kinetic heading block (category Text) — drop it into any section with a block area (Hero, Cursor FX, Section grid, Group, …) with the full set of reveal effects (Rise / Fade / Tracking / Scramble) + hover. A simpler Scramble heading block (decode only) is available too. The section and both blocks share one CSS + reveal engine (snippets/kinetic-fx + snippets/scramble-text). See Atom blocks.

Common use cases

• ✅ Section divider statement — a big kinetic brand line between content blocks
• ✅ Decode reveal — a Scramble headline that “types itself in” as you reach it (Once), or a looping terminal-style banner (Loop)
• ✅ Manifesto / values — a punchy headline that animates as you reach it

9.7 Scroll parallax scene (scroll-parallax)

An editorial depth scene: a full-bleed background, a centered content group, and floating image layers that each translate at their own rate as the scene scrolls. The layers behave as a tiling grid you can fill edge-to-edge, split a single image across, or scatter as floating cut-outs — with per-axis drift for any diagonal and a one-click “explode from centre” reveal.

Available on: any template except password.

Engine: a light requestAnimationFrame scroll driver (not CSS scroll-timeline), so the parallax runs everywhere — theme editor, live storefront, Firefox, older Safari. Reduced motion → the driver bails and everything sits at its authored rest position. Note: the theme editor has no real scroll, so its preview shows the rest layout; scroll the live preview (or the published page) to see the motion.

Content

Setting	What it does
🔧 Eyebrow / Heading (H2) / Subheading	The content group (text + optional button).
🔧 Button label / link	Optional themed button (.ne-btn--primary).
🔧 Content alignment	Left / Center (✅ default) / Right.
🔧 Text color	Light (✅ default) / Dark / Color scheme.
🔧 Content parallax speed	Range -120–120, step 5. ✅ Default 0 (static — best readability). How far the text group drifts as the scene scrolls.
🔧 Content box background	None (✅ default) / Solid (scheme background) / Glass (frosted) / Transparent (a subtle scrim that adapts to the text color). Gives the text group a panel for legibility over busy imagery.
🔧 Tint glass with accent	Glass box only — tints the glass with the scheme accent color.
🔧 Accent glow / Drop shadow	Adds a glow and/or shadow around the content box (composable).
🔧 Place box behind floating layers	The content box sits behind the image layers and is revealed as they drift apart on scroll.

When the content box is Glass and the theme’s Glass shine (Theme settings → Effects) is on, the box automatically gets the same top light-bar as every other glass surface in the theme.

Background

Setting	What it does
🔧 Show background image	✅ Default on. Off → a transparent scene (rely on the section color scheme and/or the layer grid).
🔧 Background image	Full-bleed background. Intentionally oversized (inset: -28%) with overflow: clip, so parallax travel never exposes edges.
🔧 Background parallax speed	Range -120–120, step 5. ✅ Default 40. Higher = stronger depth; negative = opposite direction.
🔧 Background zoom	Range -100–150, step 5. ✅ Default 0. Scroll-driven scale on the background — push-in (positive) or pull-out (negative).
🔧 Background blur	Range 0–20, step 1. ✅ Default 0. Scroll-driven blur — the background sharpens / softens as the scene scrolls.
🔧 Scene height	Range 60–160vh, step 5. ✅ Default 100. Hidden when Pin scene is on.
🔧 Overlay color / opacity	✅ #000000 / 30%. Dims the background for text legibility.
🔧 Edge fade + fade amount	Softens the scene edges (None / per-side) for a smooth blend into the page.
🔧 Pin scene while scrolling	✅ Default off. Holds the scene in view over a longer scroll distance so the effects play out longer (hero reveal).
🔧 Scroll distance	Pin only. Range 150–400%, step 10. ✅ Default 250. How long the scene stays pinned — longer = more travel.

Toggling Pin never shifts the layers’ start position — it only lengthens the path they travel.

Floating layer images (section-level)

Setting	What it does
🔧 Image shine / Image accent glow	A shine light-bar / accent glow on every layer image.
🔧 Layer shadow	✅ Default off. A soft drop-shadow under every floating layer — best for cut-out images; leave off for full-bleed / tiled layers (where it would read as an unwanted cast shadow).
🔧 Corner radius	Rounds the layer images.
🔧 Auto-spread from centre	✅ Default off. Every layer automatically drifts away from the section centre on scroll — the whole composition flies apart outward. Overrides the per-layer drift sliders. One click for the “split image opens up” effect.
🔧 Spread strength	Auto-spread only. Range 0–150%, step 5. ✅ Default 100. How far the layers fly apart.

Effects + chrome + color scheme

Beyond the content-box and layer effects above, the section itself takes the standard v7 chrome — transparent background, section glass (+ accent tint), accent glow, drop shadow, section color scheme (with dark/light pair), full-width (+ mobile), corner radius, and visibility (hide on mobile / desktop) toggles.

Blocks accepted

layer — up to 8 floating image tiles. Each tile is a cover cell: its Width % is applied to both the section width and height, and the image fills it with object-fit: cover. So two tiles at Width 50 + positions 25/75 tile the section edge-to-edge and crop on the shorter axis instead of leaving gaps — at any browser size.

Layer setting	What it does
🔧 Image	The tile image.
🔧 Horizontal drift / Vertical drift	Range -120–120 each. Signed per-axis parallax travel — set both for any diagonal. Negative = reverse direction. (Ignored when Auto-spread is on.)
🔧 Zoom / Rotate / Blur	Scroll-driven per layer: zoom -100–150 (push-in / pull-out), rotate -45–45°, blur 0–20. Combine with drift for a layer that scales, turns and softens as it travels. Zoom starts from the layer’s base size and moves one direction as the scene scrolls (it never scales below the base for positive zoom, so a full-bleed / width-100% layer never shows edge gaps).
🔧 Horizontal / Vertical position	% of the section. The tile is centered on this point.
🔧 Width	% — tile size (of section width × height; see above). Range 8–200% — over 100 lets a single layer bleed past the section for big atmospheric cut-outs.
🔧 Image crop focus	No crop (original ratio) / Center (✅ default) / Toward centre (auto) / Top / Bottom / Left / Right / 4 corners. Which part of the image stays fixed when it’s cropped to the cell. “No crop” drops the square cell and lets the image keep its natural aspect ratio (the cell height follows the image) — use it for elongated images that a square cover-cell would otherwise crop. “Toward centre” keeps the inner/seam edge in place and crops outward — so a single image split across 4 tiles keeps its seams aligned at every browser size.
🔧 Link	Optional link wrapping the tile.
🔧 Hide on mobile	✅ Default on — keeps small screens uncluttered.

Background and layer images use a low-res blur-up placeholder (a tiny version paints first, then sharpens in) when the theme’s Image blur-up setting (Theme settings → Effects) is on. Layer / background images are served at up to 3840px so they stay crisp on large retina screens even with zoom. By default the images lazy-load; turn on Load eagerly (hero / above the fold) when this section is the first on the page so the images load immediately at high priority for a fast LCP.

content — the text box as a reorderable layer. Drag it among the image layers in the block list to set its depth: anything above it in the list sits behind it, anything below sits in front (z-order follows list order). Each content block has its own Eyebrow / Heading / Subheading / Button, a Surface (None / Solid / Glass / Transparent + accent tint / glow / shadow), its own colour scheme (global or custom — so the surface + every text role stay coordinated and legible), corner radius, alignment (horizontal + vertical) and Parallax speed. (The section-level Content fields below still work as a fallback when no content block is added — existing scenes keep their text and front/behind placement.)

Recipes

• ✅ Split-image reveal — cut one image into 4 quarters, drop each as a layer at positions 25/25, 75/25, 25/75, 75/75 with Width 50 and Crop focus → Toward centre (auto). Turn on Auto-spread from centre: on scroll the four quarters fly apart and reveal the background behind them, seams staying aligned at any size.
• ✅ Editorial campaign banner — a backdrop plus a few floating product cut-outs (small Width, manual diagonal drift per layer).
• ✅ Calm story intro — background image, no layers, a single statement in a glass content box.

9.8 Drag gallery (physics-gallery)

A horizontal gallery you can grab and fling with momentum, plus optional cursor-parallax depth — the “premium motion” award sites are praised for. Light vanilla JS, no library.

Available on: any template except password.

a11y + robustness: the track is a native overflow-x:auto scroller, so keyboard, touch and trackpad all work natively. Mouse drag-with-momentum is an enhancement layered on top via scrollLeft (touch keeps native scroll).

Section-specific settings

Setting	What it does
🔧 Heading / Subheading	Optional intro.
🔧 Item width	Range 200–600px, step 10. ✅ Default 340px.
🔧 Gap between items	Range 0–64px, step 2. ✅ Default 24px.
🔧 Image ratio	Portrait (✅ default) / Square / Landscape / Natural.
🔧 Cursor parallax	✅ Default on. Items drift slightly toward the cursor for depth (off on touch / reduced motion).
🔧 Parallax strength	Range 0–40px, step 2. ✅ Default 12. Visible when Cursor parallax is on.
🔧 Caption position	Below (✅ default) / Overlay — caption under each card or floating over the image.
🔧 Caption gradient	✅ Default on. Overlay captions only — a scrim behind the text for legibility over the image.
🔧 Snap to items	✅ Default off. Gentle scroll-snap.
🔧 Fade cards at edges	✅ Default off. Softens the left/right edges of the gallery for a smooth blend into the page.

Effects + chrome + color scheme

Standard v7 chrome — transparent background, glass (+ accent tint), accent glow, drop shadow, section color scheme (with dark/light pair), full-width (+ mobile), corner radius, padding, and visibility (hide on mobile / desktop) toggles.

Blocks accepted

item — up to 20. Each: Image or Product (auto title/price/link), Show product price, optional Heading/Text/Link, and Parallax depth (0–100%, per-item cursor reactivity).

Common use cases

• ✅ Featured collection, premium feel — drag-fling through products with momentum
• ✅ Lookbook strip — editorial images you flick through

9.9 Cursor FX (cursor-fx)

A cursor-reactive signature section that generalizes the theme’s X-ray concept into a small toolkit: a cursor-follow spotlight reveal or an accent glow trail, behind a free block canvas for your content.

Available on: any template except password.

Content (block canvas)

The content area accepts @theme + @app blocks — drop in any mix of Heading, Text, Button, Image, Group, Icon (or app blocks). Position the group anywhere over the effect with a full 9-point grid:

Setting	What it does
🔧 Content alignment	Left / Center (✅ default) / Right — horizontal.
🔧 Content vertical position	Top / Center (✅ default) / Bottom. Combines with alignment → 9 positions.
🔧 Content frame	✅ Default off. Draws a bordered frame around the content group.
🔧 Frame color	Border (✅ default) / Accent / Heading.
🔧 Frame corner radius	✅ Default 14px.

Magnetic buttons are configured on the Button block itself (its Magnet toggle), not here — so any themed button anywhere in the theme can lean toward the cursor. See Atom blocks.

Cursor effect

Setting	What it does
🔧 Effect	Spotlight reveal (✅ default — a flashlight layer between background and content, so the content stays legible) / Accent glow (a halo trailing the cursor, screen blend) / None.
🔧 Spotlight size	Range 120–600px, step 10. ✅ Default 260px.
🔧 Spotlight intensity	Range 20–100%, step 5. ✅ Default 80%. (Spotlight only.)

The Spotlight masks a constant-darkness overlay — it lifts the dark only inside the cursor cone, so it needs Overlay opacity > 0 to be visible.

Setting	What it does
🔧 Overlay image	Optional second image layer painted above the background (Cover / Contain fit). The spotlight reveals the background beneath it — put a logo or panel on top and let the cursor “x-ray” through it to the imagery below.

Background + chrome

Background image, overlay color/opacity, minimum height (40–100vh, ✅ 70vh), plus the standard v7 chrome (transparent background / glass / glass tint / glow / shadow), color scheme (with dark/light pair), layout (full-width, radius, padding) and visibility toggles.

Motion + degradation

On touch (hover: none) and with reduced motion, all cursor effects switch off and the content renders as a clean, fully-legible static block layout. Pointer-fine devices only.

Common use cases

• ✅ Interactive hero — a dark hero where the cursor’s spotlight reveals the background imagery
• ✅ Brand statement — accent glow trailing the cursor over a bold headline + a magnetic CTA

9.10 Horizontal lookbook (horizontal-lookbook)

Vertical scroll drives horizontal travel through editorial / product panels — the classic award “pinned horizontal scroll” pattern, in pure CSS.

Available on: any template except password.

Engine: a requestAnimationFrame scroll driver pins the panel viewport and maps vertical scroll to horizontal travel. The travel end is measured from the real track and viewport width, so the last panel always lands flush at the section edge — on any screen width, desktop and mobile, editor and live (not CSS scroll-timeline). Reduced motion → the driver bails and the track becomes a plain native horizontal scroller with scroll-snap, fully usable and accessible.

Section-specific settings

Setting	What it does
🔧 Corner label	Optional persistent label in the pinned viewport corner.
🔧 Corner label alignment	Left (✅ default) / Center / Right.
🔧 Corner label horizontal padding	Range 0–120px, step 4. ✅ Default 24. Horizontal inset of the corner label.
🔧 Panel width	Range 30–90vw, step 2. ✅ Default 62vw.
🔧 Panel height	Range 50–95vh, step 1. ✅ Default 82. Height of the pinned viewport / panels.
🔧 Panel corner radius	Range 0–48px, step 2. ✅ Default 16.
🔧 Gap between panels	Range 0–64px, step 2. ✅ Default 24px.
🔧 Image panel ratio	Portrait (✅ default) / Square / Landscape.
🔧 Scroll length	Range 150–500vh, step 10. ✅ Default 300vh. Total vertical scroll mapped to horizontal travel — higher = slower, more cinematic.
🔧 Show progress bar	✅ Default on. Bottom bar that fills with travel (same timeline).
🔧 Fade panels at edges	✅ Default off. Softens the left/right edges of the pinned viewport for a smooth blend into the page.

Effects + chrome + color scheme

Standard v7 chrome — transparent background, glass (+ accent tint), accent glow, drop shadow, section color scheme (with dark/light pair), full-width (+ mobile), corner radius, and visibility (hide on mobile / desktop) toggles.

Blocks accepted

panel — up to 12. Image or Product → media panel with an overlay caption (title + price/text). Leave both empty → editorial text frame (heading + rich text + button). Optional Link, Show product price. Each panel carries its own Surface (Solid / Glass / Transparent) with accent tint, glow and shadow — so glass panels float over the editorial frames.

Common use cases

• ✅ Seasonal lookbook — scroll horizontally through campaign frames
• ✅ Curated collection story — alternating product panels and editorial text frames

9.11 Collection switcher (collection-switcher)

An editorial collection showcase: a product grid that swaps between several collections via a switcher header — the “HBO Max genre row” pattern. Nothing in the Theme Store catalog switches collections this way.

Available on: any template except password.

Engine: every collection’s grid is server-rendered once and inactive panels are hidden (no AJAX), so switching is instant and works offline, in every browser, and in the theme editor. The cards reuse the standard product card (same subgrid alignment, swatches, quick view, glow/shadow). The switcher is role=tablist / role=tab / role=tabpanel with full keyboard support (←/→/Home/End).

Switcher style

Setting	What it does
🔧 Subheading	Optional small label above the switcher (e.g. “Discover”).
🔧 Switcher style	Coverflow (✅ default — active collection centred + large, neighbours faded at the edges, chevrons either side) / Glass box (active collection name in a frosted glass box that overlaps the top of the grid, chevrons inside the box).
🔧 Show arrows	✅ Default on. Coverflow only — the glass box always switches via its built-in arrows, so this is hidden there.
🔧 Show product count	Glass box only — shows “N products” under the collection name.

Glass box carries its own glass controls (shown only for that style): Tint glass with accent, Accent glow, Drop shadow and Corner radius — so the box reads as a first-class glass surface, matching the rest of the theme.

Layout

Setting	What it does
🔧 Products per collection	Range 2–12. ✅ Default 8.
🔧 Columns (desktop)	Range 2–6. ✅ Default 4.
🔧 Columns (mobile)	1 / 2 (✅ default).
🔧 Gap between cards	Range 4–40px, step 4. ✅ Default 16.

Card content + style

The full product-card control set: image ratio, title max lines, show vendor / second image on hover / colour swatches / quick view / add-to-cart; card corner radius, image corner radius, inner padding; Card surface (Solid / Transparent / Glass + accent tint), card glow and drop shadow. A custom card colour scheme can be set here at section level (the default for all tabs) and overridden per collection (see Blocks accepted) — so the cards pop against the section background, and each collection can even use a different card scheme.

Effects + chrome + color scheme

Standard v7 chrome — section colour scheme (with dark/light pair), transparent background, glass + glass tint, glow, shadow, full-width (+ mobile), corner radius, padding and visibility toggles.

Blocks accepted

Collection — up to 8. Each: a collection picker, an optional custom label (overrides the collection title in the switcher), and an optional custom card colour scheme (toggle + scheme picker) so that collection’s cards can use a different scheme from the section background and from the other tabs.

Common use cases

• ✅ Shop by category — switch between “Menswear / Womenswear / Studio Edit” under one editorial header
• ✅ Curated edits — flip through a few hand-picked collections on the homepage
• ✅ Seasonal rows — “New in / Sale / Bestsellers” as a single switchable block

9.12 Bento Hero (bento-hero)

A hero-scale bento grid where every cell is a free, fill-the-fold slot that can hold any sensible block — kinetic/scramble headings, a Shape (free-form glass), a Box, a Coverflow product grid, video, countdown, before-after, atoms, app blocks. Where Bento Grid (§9.2) is a content section with six fixed tile types, Bento Hero is an open canvas built for the first screen: the grid fills the viewport height and each cell is its own composition surface.

Available on: any template except password.

Why it’s distinct: the catalog’s bento layouts are fixed image/product/text tiles. Here a cell is a real block slot — you can drop a Coverflow carousel into one cell, a scramble headline into the next, a glass Shape into a third, and the grid arranges them at hero scale. It’s the “compose your own hero out of the whole block arsenal” pattern.

Grid

Setting	What it does
🔧 Columns (desktop)	Range 2–12. ✅ Default 6.
🔧 Columns (mobile)	Range 1–4. ✅ Default 2.
🔧 Gap between cells	Range 0–48px. ✅ Default 12.
🔧 Cell base height	Range 80–400px. ✅ Default 200. The minimum row height; rows stretch to fill the viewport when Fill viewport is on.
🔧 Fill viewport height	✅ Default on. The grid grows to the chosen viewport height and rows stretch to fill it (true hero). Off → the grid is exactly as tall as its content × cell base height.
🔧 Viewport height	Range 40–100%, shown only when Fill viewport is on. ✅ Default 80 (= 80vh).

Background

Setting	What it does
🔧 Background image	Optional full-bleed image behind all cells (loaded eagerly as a likely LCP element).
🔧 Overlay color + opacity	Tint over the background image for text legibility. Opacity 0 = no overlay.

Effects + chrome + color scheme

Standard v7 chrome — section colour scheme (with dark/light pair), transparent background, glass + glass tint, glow, shadow, full-width (✅ default on) + full-width mobile (✅ default on), section side padding (✅ default 0 = cells edge-to-edge), top/bottom padding (✅ default 0), corner radius and visibility toggles.

Blocks accepted

Bento cell — up to 20 cells. Each cell is configured independently (see below).

Bento-cell block (bento-cell)

A single free cell. It holds any of the curated blocks and styles its own surface.

Placement / size

Setting	What it does
🔧 Column span (desktop) / Row span (desktop)	How many grid columns/rows the cell occupies on desktop.
🔧 Column span (mobile) / Row span (mobile)	Same for mobile.
🔧 Horizontal position	Left / Center / Right — how the cell’s content sits horizontally.
🔧 Vertical position	Top / Center / Bottom.
🔧 Inner padding	Space inside the cell around its content. ✅ Default 24.
🔧 Content gap	Vertical gap between stacked blocks inside the cell. ✅ Default 12.
🔧 Clip content to cell	✅ Default on. Off → content (e.g. a glow or an overhanging Shape) may bleed past the cell edge.

Surface / style

Setting	What it does
🔧 Background image + overlay color/opacity	Optional per-cell image behind that cell’s blocks.
🔧 Surface	Transparent (✅ default) / Solid (scheme background) / Glass. The glass sits on a dedicated sub-layer so a block’s own glass inside the cell still works.
🔧 Tint glass with accent	Shown only for the Glass surface.
🔧 Corner radius	✅ Default 16.
🔧 Hover effect	None / Lift / Zoom / Tilt (cursor-following 2D skew) / Glow pulse. ✅ Default Lift.
🔧 Accent glow / Drop shadow	Per-cell glow and shadow (at 60% of the section intensity).

Every cell also carries the full Advanced settings suite (transform offset/rotation/scale/opacity/z-index, glow/shadow with sharpness, section overlap, scroll parallax, entrance animation, custom mobile values) — same as the Box and Shape blocks.

Blocks accepted in a cell (curated — product-context and container-internal blocks are deliberately excluded so the picker stays sensible): Heading, Text, Button, Image, Icon, Group, Divider, Spacer, Box, Shape, Kinetic heading, Scramble heading, Product grid (Coverflow), Video, Newsletter form, Countdown, Before/After comparison, plus app blocks (under the Apps tab).

Common use cases

• ✅ Editorial hero — a big scramble/kinetic headline in one cell, a CTA button in another, a glass Shape accent in a third
• ✅ Shop-the-fold — drop a Coverflow product grid into a wide cell beside a heading + button stack
• ✅ Feature mosaic — mix video, countdown and image cells into a hero-scale arrangement

Tip for narrow cells: very width-sensitive blocks (Coverflow product grid, Countdown, Before/After) are best given a wider column span — in a 1-column cell they can compress. Headings reflow cleanly (the scramble heading locks each word’s footprint so its random characters never bounce the line).

9.13 Shader Background (shader-background)

A full-bleed, GPU-rendered animated backdrop that doubles as a hero — drop any theme/app block on top (a Kinetic heading, a Box, a Shape, a button…). Runs as a WebGL fragment shader on the visitor’s GPU; no external service, no video file.

Effect

Nine looks from one engine (Effect): Gradient mesh · Aurora · Prism shimmer · Plasma · Swirl · Ripple · Starfield · Mesh grid · Caustics.

Setting	What it does
Color source	From color scheme (uses the scheme’s background / accent / heading) or Custom (own pickers).
Color A / B / C	Custom colours (visible with Custom).
Use second color	Off → a single-colour effect (colour B collapses onto A).
Use third color	Adds the third accent colour.
Speed / Intensity / Scale / Grain	Animation speed, brightness, pattern scale, film grain.
Vignette	Darkens the edges.
Warp / Twist	Liquid distortion / spiral swirl of the pattern. The logo (relief) is exempt from both.
Contrast	Gradient softness vs. crispness.
Effect center X / Y	Moves the centre the radial/swirl/ripple/plasma/twist effects emanate from (was always the middle).
Static gradient on mobile	Renders the static CSS gradient on phones (battery + performance).

Interaction

Cursor/touch feedback (Interaction): Glow (brighten under the cursor), Ripple, Repel, Swirl — plus Interaction strength. Fades out when the pointer leaves the window.

Logo / silhouette

Set a transparent PNG (image picker) or a PNG/SVG Files URL, then choose Logo mode:

• Mask — the gradient takes the shape of the logo (the logo is cut out of the gradient). Invert mask flips it: the logo is left out (a hole) and the gradient runs around it.
• Relief — the logo is embossed into the gradient with light/shadow so it rises out like a relief. Relief depth, Light angle and Relief softness (higher = softer, more realistic bevel; lower = harder edges) shape it.

Size + placement apply to both modes: Mask fit (Fit / Fill / Stretch), Mask position (5 anchors), Logo size, and Logo offset X / Y (free nudge).

Overlay

A flat tint or a gradient shape over the shader (Overlay style): Solid · Linear · Radial · Vignette · Spotlight · Conic.

Setting	What it does
Overlay color / color 2	The two ends of the gradient.
Use second overlay color	Off → a single-colour overlay gradient.
Run out to transparent	Fade the start / end / both ends to transparent (no grey midpoint).
Transition softness	How gradual the colour transition is — 100 = full, gentle blend; 0 = a hard edge. Works on all gradient forms.
Gradient position (linear) / Position (anchor)	Shift the linear gradient along its axis, or place the radial/conic/vignette/spotlight centre.
Overlay angle	Direction for linear / conic.
Overlay blend mode	Normal · Multiply · Screen · Overlay · Soft light · Color dodge.
Overlay opacity	Strength of the overlay.
Keep logo clear of overlay	The overlay skips the logo silhouette, so it stands out.
Logo overlay opacity	A separate overlay just over the logo — 0 leaves it fully clear, higher tints only the logo (independent of the background overlay).

Heads-up — Color dodge: with the Color dodge blend mode and very contrasting overlay colours (e.g. black → white), the gradient can show banding — color dodge mathematically amplifies the difference. Use the Normal blend mode, or colours closer together, for a clean look.

Scope

Where the shader paints — This section (a hero), Behind the next section (extends under the following section), or Whole page (a fixed backdrop behind everything).

Effects + chrome + color scheme

Standard v7 chrome: Glow, Shadow, full-width (desktop + mobile), corner radius, padding, visibility, and the global/dark-light color scheme (which also feeds the shader colours when From color scheme is chosen).

Performance + fallbacks

Always paints a static CSS gradient as a safe fallback for: reduce motion, no WebGL, lost GPU context, and the static-on-mobile toggle. Capped at 30 fps and DPR 1.5, paused off-screen, low-power GPU context — and disposed cleanly in the editor (no GPU leak).

Blocks accepted

Any theme block (@theme) and app block (@app) — compose the hero content freely on top of the shader.

Common use cases

• ✅ Brand hero — a relief of your logo rising out of an aurora, a kinetic headline + CTA on top
• ✅ Whole-page ambience — a slow gradient-mesh behind the entire storefront (scope Whole page, low speed)
• ✅ Editorial moment — a vignette/spotlight overlay focusing a headline, the logo kept clear of the overlay

Next

Chapter 10 — Marketing sections — Newsletter, Testimonials, Brand Slider, Announcement Bar, Countdown, Before-After, and more.