Skip to content
Motion Atlas

Live examples of what AI can make for a website, each with the prompt that asks for it and the source to copy.

All examples / feature card

Isometric sync: laptop to phone

Two isometric devices on a soft platform; small coloured data blocks slide along a dashed track from the laptop to the phone, one every two seconds, and the phone screen glows as each one lands.

Prompt tested

Two devices on an isometric platform with data blocks moving from the laptop to the phone
Large
Two devices on an isometric platform with data blocks moving from the laptop to the phone

Feature card size

Prompt

Draw a looping isometric illustration for a 'Sync' feature card as one inline SVG with CSS keyframes only (no JavaScript, no libraries). Scene: a light paper-coloured isometric platform (30° projection) holding a laptop on the left with its screen facing right and a phone standing in a small dock on the right. A dashed light-blue track runs between them. Three small isometric cubes (mint, warm yellow, coral) slide along the track from the laptop to the phone, evenly spaced, fading in at the laptop and fading out into the phone; the phone screen softly glows as each cube arrives. Use a navy outline (#1F2A44, 1.5 px, round joins) and the palette ink #1F2A44, slate #5B6B8C, sky #7FB6FF, mint #6FD6B4, sun #FFC861, coral #FF8A7A, paper #F6F4EF; shade each box with a light top, mid right face and darker left face. Loop every 6 seconds with no visible jump; animate only transform and opacity; add a prefers-reduced-motion rule that stops all animation and leaves a calm still frame with the cubes spread along the track.

Prompt test

A fresh AI session given only the prompt above rebuilt this on 2026-11-03 using claude-opus-5-5; a separate fresh session using claude-opus-5-5 judged it “like this”.

The original example
Original
The rebuild made from the prompt alone
Rebuilt from the prompt

Lesson: Naming the scene object by object (platform, laptop facing right, phone in a dock, dashed track), the exact hex palette with "light top, mid right, darker left" face shading, and the motion as "cubes slide, fade in at one device and out into the other, every 6 s" was enough for a first-try match; the rebuild differed only in details the prompt left open (screen content, cube count visible, phone facing the viewer).

Words it rests on

  • isometric illustration (30° projection)
  • inline SVG
  • CSS @keyframes
  • seamless loop
  • staggered animation-delay
  • three-tone face shading
  • prefers-reduced-motion still frame
  • feature card

Facts

Tags
feature card css keyframes inline svg isometric flat shaded harbor
Weight
1.8 KB gzip (SVG + CSS)
Needs
No library, no JavaScript
Browser support
All current browsers (Chrome, Edge, Firefox, Safari 15+); CSS transforms on SVG groups.
Loop
6 s, seamless; still frame with reduced motion
Link
/examples/iso-sync/

Source

Paste both parts into any page. Wrap the SVG in <div class="ma-iso-sync"> and put the CSS in a <style> element or your stylesheet; every class, id and animation name starts with ma-iso-sync, so it will not clash with your styles.

demo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" role="img" aria-labelledby="ma-iso-sync-title">
<title id="ma-iso-sync-title">Two devices on an isometric platform with data blocks moving from the laptop to the phone</title>
<g stroke="#1F2A44" stroke-width="1.5" stroke-linejoin="round">
<path d="M156.3 93.7L346.8 203.7L232.5 269.7L42 159.7Z" fill="#1F2A44" opacity=".08"/>
<path d="M352.5 185L238.2 251L238.2 240L352.5 174Z" fill="#C9D2E3"/>
<path d="M47.7 141L238.2 251L238.2 240L47.7 130Z" fill="#A3B0C8"/>
<path d="M162 64L352.5 174L238.2 240L47.7 130Z" fill="#F6F4EF"/>
<path d="M176.3 130.6L244.9 170.2L231.5 177.9L163 138.3Z" fill="#E6E9F0"/>
<path d="M171.5 135.5L236.3 172.9" fill="none" stroke="#7FB6FF" stroke-width="2" stroke-dasharray="4 6" stroke-linecap="round"/>
<g class="ma-iso-sync-laptop">
<path d="M202 117.9L141 153.1L141 148.7L202 113.5Z" fill="#B7C1D3"/>
<path d="M91.5 124.5L141 153.1L141 148.7L91.5 120.1Z" fill="#8F9BB3"/>
<path d="M152.5 84.9L202 113.5L141 148.7L91.5 120.1Z" fill="#E8ECF3"/>
<path d="M148.7 100.1L179.1 117.7L148.7 135.3L118.2 117.7Z" fill="#C9D2E3"/>
<path d="M153 85.2L92.1 120.4L92.1 69.8L153 34.6Z" fill="#5B6B8C"/>
<path d="M88.6 118.5L92.1 120.4L92.1 69.8L88.6 67.9Z" fill="#8F9BB3"/>
<path d="M149.6 32.7L153 34.6L92.1 69.8L88.6 67.9Z" fill="#E8ECF3"/>
<path d="M149.4 83.1L96.1 113.9L96.1 72.1L149.4 41.3Z" fill="#7FB6FF"/>
<path d="M143.7 53.4L101.8 77.6" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<path d="M143.7 63.3L115.1 79.8" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<path d="M143.7 73.2L101.8 97.4" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<g class="ma-iso-sync-send" opacity=".35">
<path d="M149.4 83.1L96.1 113.9L96.1 72.1L149.4 41.3Z" fill="#F6F4EF"/>
</g>
</g>
<g class="ma-iso-sync-block ma-iso-sync-block-1">
<path d="M239.3 168.7L229.8 174.2L229.8 163.2L239.3 157.7Z" fill="#6FD6B4"/>
<path d="M220.2 168.7L229.8 174.2L229.8 163.2L220.2 157.7Z" fill="#4FB896"/>
<path d="M229.8 152.2L239.3 157.7L229.8 163.2L220.2 157.7Z" fill="#A8E8D2"/>
</g>
<g class="ma-iso-sync-block ma-iso-sync-block-2">
<path d="M216.3 155.4L206.7 160.9L206.7 149.9L216.3 144.4Z" fill="#FFC861"/>
<path d="M197.2 155.4L206.7 160.9L206.7 149.9L197.2 144.4Z" fill="#E8AC3E"/>
<path d="M206.7 138.9L216.3 144.4L206.7 149.9L197.2 144.4Z" fill="#FFE0A3"/>
</g>
<g class="ma-iso-sync-block ma-iso-sync-block-3">
<path d="M193.2 142.1L183.7 147.6L183.7 136.6L193.2 131.1Z" fill="#FF8A7A"/>
<path d="M174.2 142.1L183.7 147.6L183.7 136.6L174.2 131.1Z" fill="#E06A5B"/>
<path d="M183.7 125.6L193.2 131.1L183.7 136.6L174.2 131.1Z" fill="#FFB8AD"/>
</g>
<g class="ma-iso-sync-phone">
<path d="M289.7 188.3L263 203.7L263 198.2L289.7 182.8Z" fill="#B7C1D3"/>
<path d="M226.8 182.8L263 203.7L263 198.2L226.8 177.3Z" fill="#8F9BB3"/>
<path d="M253.5 161.9L289.7 182.8L263 198.2L226.8 177.3Z" fill="#E8ECF3"/>
<path d="M268.7 187.2L264.5 189.6L264.5 136.8L268.7 134.4Z" fill="#1F2A44"/>
<path d="M241.6 176.4L264.5 189.6L264.5 136.8L241.6 123.6Z" fill="#5B6B8C"/>
<path d="M245.8 121.2L268.7 134.4L264.5 136.8L241.6 123.6Z" fill="#5B6B8C"/>
<path d="M243.9 173.6L261.8 183.9L261.8 139.9L243.9 129.6Z" fill="#7FB6FF"/>
<path d="M247.2 140.2L258.6 146.8" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<path d="M247.2 149.5L258.6 156.1" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<path d="M247.2 158.7L253.8 162.6" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".9"/>
<g class="ma-iso-sync-receive" opacity=".25">
<path d="M243.9 173.6L261.8 183.9L261.8 139.9L243.9 129.6Z" fill="#6FD6B4"/>
</g>
<circle cx="252.9" cy="169.9" r="7" fill="#6FD6B4" stroke="#1F2A44" stroke-width="1.5"/>
<path d="M249.7 169.9l2.2 2.4 4.2-4.6" fill="none" stroke="#1F2A44" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>

demo.css

/* Isometric sync card: data blocks travel from the laptop to the phone, one every 2 s.
   Loop period 6 s; the negative delays make the first frame match the still frame. Only transform and opacity animate. */
.ma-iso-sync svg {
  display: block;
  width: 100%;
  height: auto;
}

.ma-iso-sync .ma-iso-sync-block {
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.ma-iso-sync .ma-iso-sync-block-1 {
  animation-name: ma-iso-sync-travel-1;
  animation-delay: -4.48s;
}

.ma-iso-sync .ma-iso-sync-block-2 {
  animation-name: ma-iso-sync-travel-2;
  animation-delay: -2.48s;
}

.ma-iso-sync .ma-iso-sync-block-3 {
  animation-name: ma-iso-sync-travel-3;
  animation-delay: -0.48s;
}

/* Each block starts at the laptop, slides to the dock and fades into the phone. */
@keyframes ma-iso-sync-travel-1 {
  0%, 100% { transform: translate(-51.6px, -29.8px); opacity: 0; }
  10% { opacity: 1; }
  80% { transform: translate(3.7px, 2.1px); opacity: 1; }
  90% { transform: translate(3.7px, 2.1px); opacity: 0; }
}

@keyframes ma-iso-sync-travel-2 {
  0%, 100% { transform: translate(-28.5px, -16.5px); opacity: 0; }
  10% { opacity: 1; }
  80% { transform: translate(26.7px, 15.4px); opacity: 1; }
  90% { transform: translate(26.7px, 15.4px); opacity: 0; }
}

@keyframes ma-iso-sync-travel-3 {
  0%, 100% { transform: translate(-5.5px, -3.2px); opacity: 0; }
  10% { opacity: 1; }
  80% { transform: translate(49.7px, 28.7px); opacity: 1; }
  90% { transform: translate(49.7px, 28.7px); opacity: 0; }
}

/* The laptop screen brightens as each block leaves; the phone screen glows as it lands. */
.ma-iso-sync .ma-iso-sync-send,
.ma-iso-sync .ma-iso-sync-receive {
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ma-iso-sync .ma-iso-sync-send {
  animation-name: ma-iso-sync-send;
}

.ma-iso-sync .ma-iso-sync-receive {
  animation-name: ma-iso-sync-receive;
}

@keyframes ma-iso-sync-send {
  0%, 100% { opacity: 0.15; }
  10% { opacity: 0; }
  70% { opacity: 0; }
  86% { opacity: 0.45; }
}

@keyframes ma-iso-sync-receive {
  0%, 100% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 0.6; }
  60% { opacity: 0; }
}

/* Calm still frame: the markup's resting state shows three blocks on their way. */
@media (prefers-reduced-motion: reduce) {
  .ma-iso-sync,
  .ma-iso-sync * {
    animation: none !important;
  }
}