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

Glass sync: laptop to phone

Frosted-glass laptop and phone panels over a soft sky-to-mint backdrop with blurred colour blobs; glowing data blocks show through the glass as they leave the laptop, cross a dotted line and fade into the phone.

Prompt tested

A frosted-glass laptop and phone over a soft colour backdrop; glowing data blocks slide from the laptop to the phone, showing through the glass
Large
A frosted-glass laptop and phone over a soft colour backdrop; glowing data blocks slide from the laptop to the phone, showing through the glass

Feature card size

Prompt

Draw a looping glassmorphism illustration (translucent frosted white panels at 35–55 % opacity with a 1 px light rim, over a soft colourful gradient backdrop, no outlines in navy, front view, not isometric) for a 'Sync' feature card in the Harbor palette, as one inline SVG animated with CSS keyframes only (no JavaScript, no libraries). Scene, on a rounded card: a diagonal sky #7FB6FF to mint #6FD6B4 gradient backdrop with three big blurred blobs (coral bottom left, warm yellow top right, a faint paper one in the middle), blurred with a static SVG feGaussianBlur filter and clipped to the card. On it a laptop on the left made of a rounded frosted-glass screen pane (white linear gradient from 55 % to 35 % opacity, thin white rim) with three white text bars, over a thin frosted base bar, and an upright frosted-glass phone pane on the right with a speaker slit, two white bars and a mint check badge with a navy check. A dotted white line runs between them. Three small rounded squares (mint, warm yellow, coral), each with a soft white radial-gradient halo so they glow, slide along the line from the laptop to the phone, one leaving every 2 seconds; draw them under the glass panes so each one starts inside the laptop pane and ends inside the phone pane, showing through the frosted glass, fading in and out there. The laptop pane brightens briefly as each block leaves and the phone pane tints mint as each one lands. Colours: ink #1F2A44, sky #7FB6FF, mint #6FD6B4, sun #FFC861, coral #FF8A7A, paper #F6F4EF and white. Never animate a filter. 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 three blocks spread along the line.

Words it rests on

  • glassmorphism
  • frosted translucent panels
  • 1 px light rim
  • gradient backdrop with blurred blobs (static)
  • glow through the glass
  • radial-gradient halo
  • inline SVG
  • CSS @keyframes
  • prefers-reduced-motion still frame
  • feature card

Prompt test

A fresh AI session given only this prompt rebuilt this on 2026-11-04 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: Glassmorphism in a plain SVG needs the recipe, not just the word: 'white at 55 % to 35 % opacity, a thin white rim, over a gradient backdrop with big blurred blobs' gave the frosted look without backdrop-filter. 'Draw them under the glass panes so each one starts inside the laptop pane' made the blocks glow through the glass. Saying 'never animate a filter' kept the blur static. As in the flat and clay versions, the rebuild showed one block at a time, so the next prompt should give the crossing time.

Facts

Tags
feature card css keyframes inline svg svg gradients glass harbor
Weight
1.6 KB gzip (SVG + CSS)
Needs
No library, no JavaScript
Browser support
All current browsers (Chrome, Edge, Firefox, Safari 15+); CSS transforms on SVG groups, SVG gradients, a clip path and a static blur filter.
Loop
6 s, seamless; still frame with reduced motion
Link
/examples/glass-sync/

Source

Paste both parts into any page. Wrap the SVG in <div class="ma-glass-sync"> and put the CSS in a <style> element or your stylesheet; every class, id and animation name starts with ma-glass-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-glass-sync-title">
<title id="ma-glass-sync-title">A frosted-glass laptop and phone over a soft colour backdrop; glowing data blocks slide from the laptop to the phone, showing through the glass</title>
<defs>
<linearGradient id="ma-glass-sync-bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7FB6FF"/><stop offset="1" stop-color="#6FD6B4"/></linearGradient>
<linearGradient id="ma-glass-sync-pane" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".55"/><stop offset="1" stop-color="#FFFFFF" stop-opacity=".35"/></linearGradient>
<radialGradient id="ma-glass-sync-halo"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".9"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<clipPath id="ma-glass-sync-card"><rect x="8" y="8" width="384" height="284" rx="28"/></clipPath>
<filter id="ma-glass-sync-soft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter>
</defs>
<g clip-path="url(#ma-glass-sync-card)">
<rect x="8" y="8" width="384" height="284" fill="url(#ma-glass-sync-bg)"/>
<g filter="url(#ma-glass-sync-soft)"><circle cx="96" cy="236" r="62" fill="#FF8A7A"/><circle cx="330" cy="58" r="52" fill="#FFC861"/><circle cx="214" cy="120" r="44" fill="#F6F4EF" opacity=".6"/></g>
</g>
<path d="M190 150H276" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-dasharray="0 12" opacity=".8"/>
<g class="ma-glass-sync-block ma-glass-sync-block-1"><circle cx="266" cy="150" r="18" fill="url(#ma-glass-sync-halo)"/><rect x="257" y="141" width="18" height="18" rx="5" fill="#6FD6B4"/></g>
<g class="ma-glass-sync-block ma-glass-sync-block-2"><circle cx="233" cy="150" r="18" fill="url(#ma-glass-sync-halo)"/><rect x="224" y="141" width="18" height="18" rx="5" fill="#FFC861"/></g>
<g class="ma-glass-sync-block ma-glass-sync-block-3"><circle cx="200" cy="150" r="18" fill="url(#ma-glass-sync-halo)"/><rect x="191" y="141" width="18" height="18" rx="5" fill="#FF8A7A"/></g>
<g stroke="#FFFFFF" stroke-opacity=".9">
<rect x="58" y="86" width="126" height="88" rx="14" fill="url(#ma-glass-sync-pane)"/>
<rect x="44" y="180" width="154" height="14" rx="7" fill="url(#ma-glass-sync-pane)"/>
<rect x="282" y="74" width="66" height="120" rx="16" fill="url(#ma-glass-sync-pane)"/>
</g>
<g fill="#FFFFFF">
<rect x="74" y="104" width="56" height="7" rx="3.5" opacity=".95"/>
<rect x="74" y="118" width="36" height="7" rx="3.5" opacity=".8"/>
<rect x="74" y="132" width="66" height="7" rx="3.5" opacity=".8"/>
<rect x="306" y="82" width="18" height="4" rx="2" opacity=".9"/>
<rect x="294" y="98" width="34" height="6" rx="3" opacity=".95"/>
<rect x="294" y="110" width="22" height="6" rx="3" opacity=".8"/>
</g>
<g class="ma-glass-sync-send" opacity=".2"><rect x="58" y="86" width="126" height="88" rx="14" fill="#FFFFFF"/></g>
<g class="ma-glass-sync-receive" opacity=".2"><rect x="282" y="74" width="66" height="120" rx="16" fill="#6FD6B4"/></g>
<circle cx="315" cy="170" r="10" fill="#6FD6B4" stroke="#FFFFFF"/>
<path d="M310.5 170l3 3.2 6-6.4" fill="none" stroke="#1F2A44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

demo.css

/* Glass sync card: glowing blocks slide from the laptop to the phone, one every 2 s, and show through the
   frosted panels as they leave and arrive. Loop period 6 s. Only transform and opacity animate; the blurred
   colour backdrop is static. */
.ma-glass-sync svg {
  display: block;
  width: 100%;
  height: auto;
}

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

.ma-glass-sync .ma-glass-sync-block-1 {
  animation-name: ma-glass-sync-travel-1;
  animation-delay: -3.6s;
}

.ma-glass-sync .ma-glass-sync-block-2 {
  animation-name: ma-glass-sync-travel-2;
  animation-delay: -1.6s;
}

.ma-glass-sync .ma-glass-sync-block-3 {
  animation-name: ma-glass-sync-travel-3;
  animation-delay: -5.6s;
}

/* Each block appears inside the laptop pane, crosses, and fades out inside the phone pane. */
@keyframes ma-glass-sync-travel-1 {
  0%, 100% { transform: translateX(-116px); opacity: 0; }
  10% { opacity: 1; }
  80% { transform: translateX(50px); opacity: 1; }
  90% { transform: translateX(50px); opacity: 0; }
}

@keyframes ma-glass-sync-travel-2 {
  0%, 100% { transform: translateX(-83px); opacity: 0; }
  10% { opacity: 1; }
  80% { transform: translateX(83px); opacity: 1; }
  90% { transform: translateX(83px); opacity: 0; }
}

@keyframes ma-glass-sync-travel-3 {
  0%, 100% { transform: translateX(-50px); opacity: 0; }
  10% { opacity: 1; }
  80% { transform: translateX(116px); opacity: 1; }
  90% { transform: translateX(116px); opacity: 0; }
}

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

.ma-glass-sync .ma-glass-sync-send {
  animation-name: ma-glass-sync-send;
  animation-delay: -1.42s;
}

.ma-glass-sync .ma-glass-sync-receive {
  animation-name: ma-glass-sync-receive;
  animation-delay: -1.7s;
}

@keyframes ma-glass-sync-send {
  0%, 100% { opacity: 0.1; }
  10% { opacity: 0; }
  70% { opacity: 0; }
  86% { opacity: 0.35; }
}

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

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

Same idea, other ways

Say 'glassmorphism: frosted white panels at 35–55 % opacity with a 1 px light rim over a soft gradient backdrop' to turn the solid devices into glass the coloured blocks glow through.

See all 6 side by side →