Generator asset library

Presets, motion, 2D systems, 3D scenes and models for AI generation

Generate my site can pick or randomize from this library, then open the result in Theme Designer as editable sections, layers, media, timing and interaction presets.

Items

Motion

Try Generate my site

Template presets7Full-page recipes inspired by Zentry, Rejouice, Apple and Awwwards portfolios.

AI-ready templates3MotionSites-style ready templates with media-first cards, clear states and preview/apply actions.

Section prompt blocks2Reusable section prompt blocks that the AI can compose into editable storefront pages.

Animated backgrounds3Animated background loops and atmospheric hero media represented as editor-safe presets.

Motion systems4Editable keyframes, text reveals, parallax, timing and hover choreography.

Scroll storytelling5Pinned chapters, masks, iris reveals, dolly motion and cinematic scroll pacing.

2D animation5Codrops-style grids, trails, rails and image-led movement without heavy 3D.

3D scenes6WebGL/R3F-style hero worlds, particles, refraction and atmospheric scenes.

3D models3Product object presets for packshots, orbiting hardware and staged goods.

Interactions3Magnetic CTAs, glow, scale, tilt and cursor-responsive conversion controls.

Prompt actions1Copy, preview, apply and premium-state actions that make prompt libraries operational.

Seeded random packEditable

01WebGI product drillTools, hardware, instruments, appliances and durable goods need a technical premium story.3D productOrbit lightingSpec scroll

02Ramotion / Framer parallax storyEvery generated page should feel like a modern parallax landing page while staying editable in Rukter.Layered parallaxSticky chaptersScroll-linked scale

03Obys / Cuberto type systemAgencies, portfolios, studios, culture brands and founder pages that should feel authored.Kinetic typePinned scrollMagnetic CTA

04Soda can packshotBeverage, supplement, snack, cosmetics and packaged-goods launches.3D cansScroll stagePackshot

05Portfolio showcase templateCreative portfolios, agency pages and studio storefronts need fewer words and stronger media proof.Portfolio previewEditorial cardsMotion tags

06Distortion hoverHero images, product cards or portfolio media should react like a premium interactive surface.Liquid lensTilt hoverRGB split feel

07Copy 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.

/templates

AI-ready templates

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

/sections

Section prompt blocks

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

/backgrounds

Animated backgrounds

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

Reference packs

AI-selectable presets mapped to the reference examples

Each pack expands into safe `libraryItemIds` for Generate my site and Theme Designer.

MotionSites template library

Media-first AI template cards, premium states, preview actions and editable Rukter motion recipes.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chaptersmotionsites-template-gallery-deckmotionsites-template-saas-gridmotionsites-template-portfolio-showcasetwo-d-infinite-grid-menu

MotionSites section library

Reusable section prompt blocks with collage previews, copy actions and editor-safe motion targets.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chaptersmotionsites-section-social-stackmotionsites-section-focus-collagemotion-word-scroll-revealtwo-d-codrops-grid

MotionSites backgrounds

Animated background loops, gradient motion, atmospheric depth and copyable media intent.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chaptersmotionsites-background-cinematic-loopmotionsites-background-neon-fluxmotionsites-background-soft-horizonthree-scene-field-bloom-scroll

Awwwards scroll

Pinned chapters, cinematic reveals, kinetic type and magnetic CTAs.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-rejouice-reelscroll-depth-dolly-pinmotion-word-scroll-revealtwo-d-image-trail-rail

Zentry campaign

WebGL energy, chaptered scroll, bento tiles and velocity rails.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-zentry-campaignthree-scene-particle-fieldscroll-mask-iris-revealtwo-d-codrops-grid

3D product

Object-led hero, orbit model, precise scroll and clean commerce.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-apple-product-keynotemodel-product-orbitthree-scene-liquid-lensscroll-depth-dolly-pin

Codrops 2D

Perspective grids, image trails, parallax and hover choreography.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterstwo-d-codrops-gridtwo-d-image-trail-railmotion-word-scroll-revealscroll-mask-iris-reveal

Packshot launch

3D packaged goods, floating motion, bold CTA and product scroll.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chaptersmodel-soda-can-packshotpreset-zentry-campaignmotion-css-float-bouncescroll-depth-dolly-pin

Obys / Cuberto type

Kinetic editorial typography, scroll seams, moving reel and magnetic close.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-obys-cuberto-type-systempreset-rejouice-reelmotion-word-scroll-revealscroll-horizontal-gallery

iPhone keynote

Hardware object, mask reveals, spec scroll and clean product conversion.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-iphone-spec-scrollpreset-apple-product-keynotemodel-iphone-hardware-stackthree-scene-webgi-drill

Codrops hover lab

Perspective grids, fullscreen hover, distortion, infinite media and magnetic CTA.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterstwo-d-codrops-gridtwo-d-fullscreen-hover-slidertwo-d-perspective-hover-gridtwo-d-infinite-grid-menu

Portfolio index

Kinetic identity, project depth, selected-work grid and case-study scroll.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-portfolio-index-archivepreset-obys-cuberto-type-systemmotion-word-scroll-revealscroll-depth-dolly-pin

Beverage story

3D cans, bold product energy, velocity rails and playful scroll chapters.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chapterspreset-beverage-story-scrollmodel-soda-can-packshotmotion-css-float-bouncescroll-horizontal-gallery

WebGL product lab

R3F scroll rig, WebGI-style product object, liquid lens and mesh-line atmosphere.

scroll-ramotion-framer-parallaxmotion-lenis-smooth-chaptersthree-scene-r3f-scroll-rigthree-scene-webgi-drillthree-scene-liquid-lensthree-scene-animated-mesh-lines

Template presets

Zentry campaign stack

Zentry / gaming

high

WebGL opening, chaptered scroll, bento grid, velocity rail and kinetic close.

WebGLGSAPPinned scrollBento

Rejouice agency reel

Rejouice / Obys / Cuberto

medium

Large editorial type, slow cinematic fades, moving media rail and restrained CTA.

Cinematic fadeKinetic typeImage railMagnetic CTA

Apple product keynote

Apple 3D product

high

Object-led hero, precise scroll reveal, clean commerce and product spotlight rhythm.

3D modelSpec scrollProduct spotlightMinimal motion

Obys / Cuberto type system

Obys / Cuberto / Rejouice

medium

Oversized typography, dark editorial rhythm, pinned transitions and magnetic closing action.

Kinetic typePinned scrollMagnetic CTAPortfolio depth

iPhone spec scroll

Apple / iPhone launch

high

Hardware-grade white space, object hero, specs in scroll chapters and calm commerce handoff.

3D productSpec revealMask scrollMinimal commerce

Awwwards portfolio index

Rauno / Leerob / Dennis Snellenberg

medium

Kinetic opener, selected-work depth stack, index grid and restrained conversion.

Kinetic typeDepth stackIndex gridEditor blueprint

Beverage story scroll

Lagunitas / Selemen / product story

high

Characterful product launch with 3D cans, bold color, pinned chapters and image trails.

3D cansScroll stageImage trailBold product CTA

AI-ready templates

AI-ready template gallery deck

MotionSites benchmark / templates

low

Dark media-first template cards with short titles, premium/free states and fast preview decisions.

Template cardsMedia-firstPremium statesPreview CTA

SaaS grid launch template

MotionSites benchmark / templates

low

Compact product-template grid with crisp title overlays, static fallbacks and high-contrast launch framing.

Template gridHero cardsSaaS polishEditable recipe

Portfolio showcase template

MotionSites benchmark / templates

medium

Large portfolio and agency previews that let the thumbnail carry the first read while copy stays minimal.

Portfolio previewEditorial cardsMotion tagsTheme Designer

Section prompt blocks

Social stack section cards

MotionSites benchmark / sections

low

Small prompt blocks with media collages, type filters, Copy/Premium actions and readable section roles.

Section cardsCopy actionType filterEditable blocks

Focus collage section

MotionSites benchmark / sections

low

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

Collage mediaReusable sectionPrompt outputEditable layers

Animated backgrounds

Cinematic loop background

MotionSites benchmark / backgrounds

medium

Large animated background preview with a strong central frame, adjacent peeking frames and copyable media intent.

Animated backgroundLoop previewHero mediaCopy URL intent

Neon flux background

MotionSites benchmark / backgrounds

medium

Gradient-rich animated background language for AI, crypto, music and gaming pages.

Gradient motionDark heroParticle energyReduced motion

Soft horizon background

MotionSites benchmark / backgrounds

low

A calmer animated backdrop pattern for wellness, travel, finance and premium service pages.

Ambient loopSoft gradientImage-safeEditor fallback

Motion systems

CSS float and bounce

2D keyframes

low

Floating glow objects, CTA bounce and breathing background layers with reduced-motion fallback.

CSS keyframesFloat loopBounce CTAReduced motion

Word-by-word scroll reveal

Text choreography

low

Fade-up text, word or character stagger, and editorial reading-order timing.

Word staggerFade upScroll revealEditable layer timing

Lenis smooth chapters

Lenis / smooth scroll

low

Slow chapter pacing, softened scroll arrival, staggered copy and reduced-motion fallback.

Smooth scroll feelChapter pacingFade-upReduced motion

Framer microinteractions

Framer Motion / UI polish

low

Spring-like hover, focused reveal timing and tactile control feedback for dense product pages.

Spring hoverStagger revealLift/scale controlsEditor-safe

Scroll storytelling

Ramotion / Framer parallax story

Ramotion / Framer parallax

medium

Layered foreground, midground and background motion with sticky chapters, scale reveals and calm reduced-motion fallback.

Layered parallaxSticky chaptersScroll-linked scaleReduced motion

Depth dolly pin

GSAP scroll

medium

Pinned dolly movement, parallax background and dramatic section landing.

Pinned scrollParallaxDepthGSAP-style timeline

Mask and iris reveal

Awwwards transitions

medium

Mask wipe or iris curtain reveals that convert a static section into a cinematic beat.

Mask revealIris curtainPinned transitionImage-forward

Horizontal gallery scroll

Codrops / GSAP horizontal

medium

Pinned horizontal panel motion for editorial galleries, case-study beats and collection reveals.

Horizontal panelsPinned scrollImage sequenceEditable chapters

Scroll refraction depth

Codrops / WebGL distortion

high

Image-forward refraction hero paired with depth scroll so media feels dimensional and inspectable.

Liquid lensDepth dollyPointer refractionImage-first

2D animation

Codrops tile formation

2D image systems

low

Perspective tile formation, editorial image grid and staggered product media choreography.

2D gridPerspectiveImage tilesEditable media

Image trail rail

Codrops image trails

medium

Velocity-aware strip with image movement, trail behavior and campaign pacing.

Velocity railImage trailInfinite movementHover aware

Fullscreen hover slider

Codrops hover slider

medium

Large image-led hover states, full-bleed cards and rapid campaign browsing without custom JS.

Fullscreen hoverImage revealTilt cardsEditable media

Perspective hover grid

Codrops perspective hover

low

Cards lean under pointer movement, glare highlights the active surface and captions remain editable.

Perspective hoverGlareGrid formationResponsive fallback

Infinite grid menu

Codrops infinite grid

medium

Dense moving media index, repeated image rhythm and fast category switching as editable tiles.

Infinite grid feelMedia indexCategory rhythmEditable tiles

3D scenes

Liquid lens scene

React Three Fiber style

high

Image-forward WebGL refraction, chromatic split and tactile product surface.

WebGLRefractionImage-forwardPointer hover

Particle field bloom

R3F particle world

high

Blooming point field, atmospheric depth and color-driven abstract hero.

3D particlesBloomDepthScroll stage

Field bloom scroll scene

R3F / scroll-scrubbed field

high

Scroll-linked particle bloom with copy reveal and deep-space composition.

Scroll-scrubbed WebGLParticle bloomClip revealReduced motion

WebGI product drill

WebGI / product configurator

high

A tool-like product hero with orbit lighting, spec chapters and physical material emphasis.

3D productOrbit lightingSpec scrollMaterial focus

R3F scroll rig

React Three Fiber / Drei

high

Persistent spatial world, chapter overlays and a scroll-stage structure that remains editable.

Persistent canvasScroll stageChapter overlaysEditor-safe

Animated mesh lines

Codrops / Three mesh lines

high

Line-field atmosphere with constellation depth, pointer glow and abstract product energy.

Mesh-line feelDepth constellationPointer parallaxAtmospheric bloom

3D models

Product orbit model

3D product model

high

Orbiting product object, studio lighting and clean keynote-style composition.

3D modelOrbit lightingProduct heroCommerce handoff

Soda can packshot

3D packaged goods

high

Multiple can objects with stage scroll and product-launch energy.

3D cansScroll stagePackshotPlayful motion

iPhone hardware stack

Apple / hardware stack

high

Layered device object, spec-led scroll and crisp material lighting for premium hardware.

Hardware objectSpec scrollOrbit lightingClean commerce

Interactions

Magnetic glow controls

Cursor interactions

low

Magnetic CTA, glow hover, lift/scale controls and premium button response.

Magnetic CTAGlow hoverScaleReduced motion gated

Page transition overlay

Codrops / shape overlays

medium

Curtain-like transition language represented as scroll seams, masks and editable section boundaries.

Shape overlay feelContinuum seamMask revealNo arbitrary JS

Distortion hover

Codrops / distortion hover

high

Liquid-lens and tilt-hover behavior for media cards using existing WebGL and CSS-safe presets.

Liquid lensTilt hoverRGB split feelEditable media

Prompt actions

Copy URL / apply action

MotionSites benchmark / prompt actions

low

A clear action model for prompt cards: copy a reusable asset URL, preview the result or upgrade for premium media.

Copy URLPreview actionPremium stateAI selection

How Generate my site uses it

The AI can choose explicit library IDs or build a seeded random pack from the prompt.

If the model returns known library IDs, Rukter applies those presets directly. If it does not, the generator picks a deterministic mix from the same pool so one prompt can still produce 3D, parallax, scroll, hover and text animation decisions.

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