Mula percuma

Generator asset library

Pick the motion, 2D and 3D parts your generated site is built from

This is a parts library, not a set of ready-made storefronts. You choose presets here, then Generate my site builds one editable site that uses them — sections, layers, media, timing and interaction presets you can keep editing in Theme Designer.

  1. 1Describe your store in one line (optional, but it is what makes the copy about your business).
  2. 2Choose a pack, or up to 8 individual presets.
  3. 3Continue to Generate my site — your description and preset ids travel with you.
3D2DMotion
42
Items
9
3D
5
2D
12
Motion
  • 3D3D scenes6 presets
  • 2D2D animation5 presets
  • MotionMotion systems4 presets
  • MotionAnimated backgrounds3 presets
  • TemplateTemplate presets7 presets
  • InteractionInteractions3 presets

Each tile is a schematic CSS/SVG preview of the preset’s behavior — an illustration, not a screenshot of a generated storefront.

Build your pack

Describe your store, choose a visual runtime, then continue to Generate my site

Nothing is generated or published here. Your description and selections are carried to the generator, where you review the result as a draft before deciding to publish.

Carried into the generator prompt box, where you can keep editing it before you generate.0/280

No presets selected. Choose a pack or individual presets.

Open Generate my site

Each tile is a schematic CSS/SVG preview of the preset’s behavior — an illustration, not a screenshot of a generated storefront. Continue to Generate for a real runtime preview

Up to 8 presets — the same cap the generator applies to a creative pack.

Template presets

AI-ready templates

Section prompt blocks

Animated backgrounds

Motion systems

Scroll storytelling

2D animation

3D scenes

3D models

Interactions

Prompt actions

No presets selected. Choose a pack or individual presets.

Open Generate my site

Reference — nothing below this line is needed to continue

Browse by runtime

Every group in the library, with its behavior sketched

The selector above renders the same groups as selectable presets — these cards are the map, not a second catalog.
TemplateTemplate presets7Full-page recipes inspired by Zentry, Rejouice, Apple and Awwwards portfolios.
TemplateAI-ready templates3MotionSites-style ready templates with media-first cards, clear states and preview/apply actions.
SectionSection prompt blocks2Reusable section prompt blocks that the AI can compose into editable storefront pages.
MotionAnimated backgrounds3Animated background loops and atmospheric hero media represented as editor-safe presets.
MotionMotion systems4Editable keyframes, text reveals, parallax, timing and hover choreography.
ScrollScroll storytelling5Pinned chapters, masks, iris reveals, dolly motion and cinematic scroll pacing.
2D2D animation5Codrops-style grids, trails, rails and image-led movement without heavy 3D.
3D3D scenes6WebGL/R3F-style hero worlds, particles, refraction and atmospheric scenes.
3D3D models3Product object presets for packshots, orbiting hardware and staged goods.
InteractionInteractions3Magnetic CTAs, glow, scale, tilt and cursor-responsive conversion controls.
ActionPrompt actions1Copy, preview, apply and premium-state actions that make prompt libraries operational.
Seeded random packEditable

Not selected — this is the kind of mix the generator picks for itself when you skip the selector. Choosing presets above replaces it.

  • 3D01WebGI product drillTools, hardware, instruments, appliances and durable goods need a technical premium story.3D productOrbit lightingSpec scroll
  • Scroll02Ramotion / Framer parallax storyEvery generated page should feel like a modern parallax landing page while staying editable in Rukter.Layered parallaxSticky chaptersScroll-linked scale
  • Template03Obys / Cuberto type systemAgencies, portfolios, studios, culture brands and founder pages that should feel authored.Kinetic typePinned scrollMagnetic CTA
  • 3D04Soda can packshotBeverage, supplement, snack, cosmetics and packaged-goods launches.3D cansScroll stagePackshot
  • Template05Portfolio showcase templateCreative portfolios, agency pages and studio storefronts need fewer words and stronger media proof.Portfolio previewEditorial cardsMotion tags
  • Interaction06Distortion hoverHero images, product cards or portfolio media should react like a premium interactive surface.Liquid lensTilt hoverRGB split feel
  • Action07Copy URL / apply actionThe library UI should make every preset immediately usable by the AI and understandable to sellers.Copy URLPreview actionPremium state

MotionSites benchmark

Templates, sections and animated backgrounds as AI-selectable presets

Benchmarked from motionsites.ai page structure, then mapped into Rukter section IDs so the editor still owns copy, media, timing and actions.
Template

/templates

AI-ready templates

AI

Template cards should be media-first and immediately usable.

Dark gallery, oversized centered heading, four-column preview cards, short title overlays and clear premium/free states.

Maps to editable hero, tile, velocity and CTA sections rather than imported static HTML.

AI-ready template gallery deckmotionsites-template-gallery-deck
SaaS grid launch templatemotionsites-template-saas-grid
Portfolio showcase templatemotionsites-template-portfolio-showcase
Copy URL / apply actionmotionsites-action-copy-url
Section

/sections

Section prompt blocks

AI

Sections need their own reusable prompt-card layer.

Pricing/type filters, compact cards, collage previews, Copy and Premium actions, and section-level naming.

Maps to freeform, tile, tilt, depth and magnetic blocks that remain editable in Theme Designer.

Social stack section cardsmotionsites-section-social-stack
Focus collage sectionmotionsites-section-focus-collage
Word-by-word scroll revealmotion-word-scroll-reveal
Magnetic glow controlsinteraction-magnetic-glow
Motion

/backgrounds

Animated backgrounds

AI

Backgrounds are first-class AI assets, not decorative afterthoughts.

Large loop preview, peeking adjacent frames, dense background grid and Copy URL/Premium actions.

Maps to editor-safe hero backgrounds, WebGL fallback, depth stack and scroll-cinematic presets with reduced-motion safety.

Cinematic loop backgroundmotionsites-background-cinematic-loop
Neon flux backgroundmotionsites-background-neon-flux
Soft horizon backgroundmotionsites-background-soft-horizon
Scroll refraction depthscroll-refraction-depth

What happens after Continue

Your selection travels as preset IDs and the server builds the runtime from them.

Continue opens Generate my site with your description and the IDs of the presets you picked already in the prompt box. That ID sentence is not a hint the model may ignore: the generation route parses it, checks every ID against this catalog, and binds the result to the runtime it declares — so a 3D pick keeps a real WebGL scene and a 2D pick stays CSS and canvas motion.

A selection counts as 3D only when one of the presets in it actually declares a supported WebGL renderer or 3D model — never because a pack, family or capability name mentions 3D. That is why a template pack can lock a real WebGL scene: the selector names the preset responsible, and the generator page repeats the same answer for the same selection.

The generator page shows which presets are still attached, and warns you if an edit removed them. If you skip the selector entirely, the generator picks a deterministic mix from the same pool instead, so one prompt still produces 3D, parallax, scroll, hover and text animation decisions.

Presets only decide how a page looks and moves, so add the store description too — that is the part that makes the generated copy about your business rather than a generic demo. Nothing here changes anything on its own: no account, no draft and no generation happens until you submit the prompt on the generator page.

Back to the preset selector

Editable handoff

Generated pages still open in Theme Designer.

Presets become normal editable sections, layers, images, timing values, hover behavior and motion tokens inside the store editor.

Try Generate my site