Start for free

Live preview · Free prompt / section preset

Focus collage section

A tight collage-style prompt card for focused hero/feature sections with a clear copyable output.

Collage mediaReusable sectionPrompt outputEditable layers
Get the AI prompt
OBJECT STUDIESDiscover
AN ORIGINAL RUKTER SAMPLE 01

Small things, big feeling

A tight collage-style prompt card for focused hero/feature sections with a clear copyable output.

RUKTER / PREVIEW01 — 03
Interactive sampleChange the sample frame

This original working sample uses local Rukter media. Presets with a hero renderer mount the actual Rukter renderer. Generated sites vary with your content.

Where it works

Use this pattern when

A generated page needs a single high-impact block that can be reused across themes and edited later.

Sample art direction

OBJECT STUDIES · Small things, big feeling

Runtime

DOM / CSS / 2D

How to use it

  1. 1Copy the prompt below into Codex or Claude, then add your brand and media.
  2. 2For Rukter, open Use in Rukter and check that the preset ID reaches the generator.
  3. 3Review and edit the generated draft in Theme Designer, then publish when ready.

Use with AI

Turn this example into a prompt for Codex or Claude

The prompt includes layout, behavior, runtime, accessibility and editable structure. Replace the sample brand and media with your own.

Use in Rukter 

Build an original responsive website experience for [your brand or product], using the Rukter "Focus collage section" pattern as direction.

Visual example: OBJECT STUDIES — "Small things, big feeling"; compose a media-first gallery with readable captions and deliberate visual rhythm. Replace the example content with my own brand copy and supplied media.

Behavior: A tight collage-style prompt card for focused hero/feature sections with a clear copyable output. Best for: A generated page needs a single high-impact block that can be reused across themes and edited later.

Implementation: Use lightweight CSS, DOM, or Canvas 2D for the visual behavior; do not add WebGL unless the design needs it. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: freeform, depth, magnetic. Motion settings: textReveal: words; parallaxDepth: medium; hoverEffect: scale; entranceRhythm: tight.

Make the preview usable on touch and keyboard, give controls visible focus, reserve media space to avoid layout shift, and respect prefers-reduced-motion.

When using Rukter Generate my site, preserve this exact selection: Library item ids: motionsites-section-focus-collage.

Rukter preset ID

motionsites-section-focus-collage

Editable implementation

What this preset defines

Sections
freeform · depth · magnetic
Hero renderer
DOM / CSS sample
Cinematic effect
—
Motion
textReveal: words · parallaxDepth: medium · hoverEffect: scale · entranceRhythm: tight