# Motion reference and original adaptations

Reviewed 9 September 2026. This is a small reference record for the local studio, not a licensed template collection.

## What was inspected

The public [MotionSites catalogue](https://motionsites.ai/) identifies hero, landing-page, feature, pricing and other section examples. Public pages for [Impressive Hero](https://motionsites.ai/?prompt=impressive-hero), [Glow Features](https://motionsites.ai/sections?prompt=glow-features), [Price Calculator](https://motionsites.ai/sections?prompt=price-calculator) and the [animated background collection](https://motionsites.ai/backgrounds) were checked.

The public catalogue and example names were available. These checks did not establish every frame, timing curve, interaction or implementation of the animated previews. No paid prompts, authenticated material or source code were accessed. The patterns below are original design proposals informed by those categories, not claims that a named example implements each behavior exactly. No MotionSites media is bundled with this studio.

## Transferable patterns

| Public reference | Original local adaptation | Why it helps |
| --- | --- | --- |
| [Impressive Hero](https://motionsites.ai/?prompt=impressive-hero) | One authored scene carries the first screen. Let the headline overlap its quiet area, with one compact decision surface positioned where the eye lands. Use a restrained entrance and preserve readable text from the first frame. | A memorable composition can make the customer's desired outcome feel immediate. |
| [MotionSites hero catalogue](https://motionsites.ai/) — including Aetheris Voyage and EMBER.dsgn | Treat scale and cropping as art direction: a dominant scene, one supporting close detail, a small index or caption. Change the crop and accompanying detail when a person chooses another view. | The page has rhythm and a point of view without becoming a repeating card grid. |
| [Glow Features](https://motionsites.ai/sections?prompt=glow-features) | Show one useful capability working in place. Selection reveals a real related detail or preview; a subtle localized accent identifies the active area. | The interaction supplies evidence instead of surrounding a feature claim with decoration. |
| [Price Calculator](https://motionsites.ai/sections?prompt=price-calculator) | Put a small number of meaningful inputs beside their result, with visible assumptions and a clear reset. Animate a changed value briefly; keep the underlying arithmetic and text accessible. | A person can explore the consequence of their choice immediately. |
| [Animated backgrounds](https://motionsites.ai/backgrounds) | Build an original quiet atmospheric layer using local art or CSS. Use motion only where it supports the scene; pause persistent decorative motion and provide a static reduced-motion version. | Atmosphere can add depth while leaving reading and decisions comfortable. |
| [MotionSites section catalogue](https://motionsites.ai/sections) | Let a supporting decision panel stay close to the current story. Reveal its relevant content through an explicit button, then restore focus on close. Keep the page's original reading order intact. | The practical next step remains connected to the feeling and context that make it useful. |

These are choices, not a mandatory page formula. A design can use one, combine a few, or develop a different composition.

## Tactile collage as an original expressive direction

Alongside sculptural ribbon art, a composition can combine human presence, physical textures, painted interventions, overlap, light and depth. The interest in layered MotionSites-style art direction informs this ambition; the collage itself is an original Max LVL proposal, not a reproduction of a verified MotionSites implementation.

The working `../assets/doorway-art.png` illustration combines a woman, doorway, torn paper and painted gesture; `../assets/doorway-v1-original.png` preserves the original concept. This is one scenario-specific example. A doorway does not establish a required portal symbol, and a circle or orbit in another specimen does not establish a brand motif. Choose subjects and forms for the actual piece. For this collage treatment, amber works best as localized material, painted detail and light; broad amber CTA or form backgrounds are discouraged. Other deliberate uses of amber remain available in other compositions.

The current specimen is a flattened illustration with independent CSS light and live HTML typography. For a production composition that benefits from independent motion or recomposition, prepare separate scene/backdrop, subject, foreground collage and light exports. Keep typography and controls in HTML. No layered PSD or equivalent production source is supplied by these PNGs. Layer motion should preserve the reading area, offer a composed reduced-motion state and serve the particular scene.

## Directions for customer-facing work

**Home service: relief in a real place.** Start from a specific interruption to daily life. A contemporary architectural crop, warm light on a faucet, or a technician explaining one useful detail can carry a stronger scene than a generic service collage. An example concept is “Hot water. One less thing to think about.” A compact question or repair/replacement exploration sits near the scene. Evidence belongs where uncertainty arises: what happens next, what information helps, and what can be known before an estimate. Use a client's own identity when presenting client work; label a Max LVL art-direction exercise as such.

**Retirement: a future a person can picture.** Build around a particular desire: a trip, more time with family, a different pace of work. A vivid destination scene, an oversized date or horizon, and a small scenario explorer can invite participation. “Can this be the year you take the trip?” is an exploratory concept, not a financial promise. Illustrative calculations need their assumptions and limits next to the result. The person should see both an appealing possibility and a credible next step.

**Software: the work has its own atmosphere.** The Component Lab uses the same care with composition at a quieter scale: a clearly defined canvas, supporting navigation, a raised reply inspector, real resizable separation and a human question at the center. Motion explains a drawer, a changed state or a notification. Selection stays blue; red carries identity and explicit destructive meaning. The hierarchy remains clear in both themes.