Animated Showcase
A scroll-driven animated section that highlights your brand or product through a cluster arrangement or a zoom-out image reveal.
What It Does
The Animated Showcase module creates a visually striking section where images and text animate into view as the visitor scrolls. In Grid (zoom-out) mode, a gradient background with a central focal image zooms out to reveal surrounding content. In Cluster mode, five image boxes are arranged in a freeform cluster pattern with scroll-triggered motion. Both variants support custom text lines, an optional call-to-action button, and brand colour customisation.
Best Used For
- Brand storytelling sections that benefit from scroll-driven animation
- Product launch pages where visual impact is a priority
- Full-width sections between content blocks that create a pause moment
- Campaigns where brand colours can drive the visual design
Variants
Grid
A gradient background (defined by Primary and Secondary colours) fills the section. As the visitor scrolls, the central image zooms out and surrounding text and button content animates in. Creates a cinematic focus-to-reveal effect.
Best for: Flagship product reveals, brand colour campaigns, high-impact landing sections
Cluster
Five images are arranged in an organic cluster pattern. Each image animates in from a different position as the section enters the viewport, creating an energetic, scattered-then-cohesive effect.
Best for: Brand moodboards, product family highlights, editorial-style layouts
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| variant | enumeration | No | Animation style -- Grid or Cluster |
| text1 | component | No | First line of headline text |
| text2 | component | No | Second line of headline text |
| text3 | component | No | Third line of headline text |
| button | component | No | Call-to-action button with label and link |
| image | media | No | Main central image (used in Grid variant) |
| images | component | No | Five images for the cluster arrangement (used in Cluster variant) |
| primaryColor | customField | No | Left colour of the gradient background (Grid variant only) |
| secondaryColor | customField | No | Right colour of the gradient background (Grid variant only) |
| backgroundColor | customField | No | Flat background colour applied behind the section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- For the Grid variant, choose Primary and Secondary colours that match your brand palette — the gradient is the dominant visual element.
- For the Cluster variant, use images with varied content and angles for a natural, editorial feel.
- Keep Text Lines short (one to five words each) — they are displayed in large, bold style and long text wraps poorly.
- Add a call-to-action button to direct visitors after the visual impact moment.
Supported Languages
Fully bilingual — all text line and button label fields support both English and Thai content.