Enhance Prompt Rewrite
A prompt box where the Enhance button gets pressed, sparks fly off its wand, a glint sweeps the text and the short prompt blurs into a richer rewrite. Crossfaded spans on one shared clock.
Also known as: enhance prompt button, magic wand button css, ai rewrite animation, improve writing ai.
a cat on a windowsill
A ginger cat dozing on a sunlit windowsill, dust drifting in the light, shot on 35mm film
HTML
<div class="aia-enhance-prompt" role="status" aria-label="Enhancing prompt">
<div class="aia-enhance-prompt-text">
<span class="aia-enhance-prompt-short">a cat on a windowsill</span>
<span class="aia-enhance-prompt-long">A ginger cat dozing on a sunlit windowsill, dust drifting in the light, shot on 35mm film</span>
<span class="aia-enhance-prompt-glint" aria-hidden="true"></span>
</div>
<div class="aia-enhance-prompt-row">
<span class="aia-enhance-prompt-meta">Image prompt</span>
<button class="aia-enhance-prompt-btn" type="button">
<svg viewBox="0 0 24 24" aria-hidden="true"><path class="aia-enhance-prompt-wand" d="M4 20L15 9"/><path class="aia-enhance-prompt-tip" d="M17 3.5c.3 1.9 1.1 2.7 3 3-1.9.3-2.7 1.1-3 3-.3-1.9-1.1-2.7-3-3 1.9-.3 2.7-1.1 3-3Z"/></svg>
<i class="aia-enhance-prompt-spark"></i><i class="aia-enhance-prompt-spark"></i><i class="aia-enhance-prompt-spark"></i>
Enhance
</button>
</div>
</div>CSS
.aia-enhance-prompt {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
--t: 6.5s;
width: 23em;
padding: 0.95em 0.95em 0.75em 1.1em;
box-sizing: border-box;
border-radius: 1em;
background: color-mix(in srgb, currentColor 4%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent);
}
.aia-enhance-prompt-text {
position: relative;
display: grid;
min-height: 4.2em;
font-size: 0.98em;
line-height: 1.4;
}
.aia-enhance-prompt-short,
.aia-enhance-prompt-long {
grid-area: 1 / 1;
animation: aia-enhance-prompt-short var(--t) cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}
.aia-enhance-prompt-short { color: color-mix(in srgb, currentColor 60%, transparent); }
.aia-enhance-prompt-long {
opacity: 0;
animation-name: aia-enhance-prompt-long;
}
.aia-enhance-prompt-glint {
position: absolute;
inset: -0.2em -0.4em;
border-radius: 0.4em;
background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--c) 22%, transparent) 48%, color-mix(in srgb, var(--c) 70%, #fff) 50%, color-mix(in srgb, var(--c) 22%, transparent) 52%, transparent 60%) 0 0 / 300% 100% no-repeat;
opacity: 0;
animation: aia-enhance-prompt-glint var(--t) ease-in-out infinite;
}
.aia-enhance-prompt-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5em;
}
.aia-enhance-prompt-meta {
font-size: 0.75em;
font-weight: 500;
color: color-mix(in srgb, currentColor 50%, transparent);
}
.aia-enhance-prompt-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.5em 0.85em 0.5em 0.7em;
border: 0;
border-radius: 99em;
font: inherit;
font-size: 0.85em;
font-weight: 600;
color: #fff;
background: var(--c);
box-shadow: 0 0.35em 0.9em -0.35em color-mix(in srgb, var(--c) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
cursor: pointer;
animation: aia-enhance-prompt-press var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-enhance-prompt-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 0.2em; }
.aia-enhance-prompt-btn svg {
width: 1.15em;
overflow: visible;
}
.aia-enhance-prompt-wand {
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
.aia-enhance-prompt-tip {
fill: currentColor;
transform-box: fill-box;
transform-origin: center;
animation: aia-enhance-prompt-tip var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-enhance-prompt-spark {
position: absolute;
left: 1.25em;
top: 0.35em;
width: 0.3em;
height: 0.3em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 40%, #fff);
opacity: 0;
--x: 0.9em;
--y: -1em;
animation: aia-enhance-prompt-spark var(--t) cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.aia-enhance-prompt-spark:nth-of-type(2) { --x: 0.1em; --y: -1.3em; }
.aia-enhance-prompt-spark:nth-of-type(3) { --x: 1.3em; --y: -0.3em; }
@keyframes aia-enhance-prompt-press {
0%, 20%, 100% { scale: 1; }
24% { scale: 0.92; }
30% { scale: 1; }
}
@keyframes aia-enhance-prompt-tip {
0%, 22%, 100% { scale: 1; rotate: 0deg; }
28% { scale: 1.5; rotate: 90deg; }
36% { scale: 1; rotate: 90deg; }
}
@keyframes aia-enhance-prompt-spark {
0%, 24% { opacity: 0; translate: 0 0; scale: 1; }
26% { opacity: 1; }
38%, 100% { opacity: 0; translate: var(--x) var(--y); scale: 0.3; }
}
@keyframes aia-enhance-prompt-glint {
0%, 26% { opacity: 0; background-position: 100% 0; }
30% { opacity: 1; }
44% { opacity: 1; background-position: 0% 0; }
50%, 100% { opacity: 0; background-position: 0% 0; }
}
@keyframes aia-enhance-prompt-short {
0%, 32% { opacity: 1; filter: blur(0); translate: 0 0; }
40%, 92% { opacity: 0; filter: blur(0.2em); translate: 0 -0.3em; }
100% { opacity: 1; filter: blur(0); translate: 0 0; }
}
@keyframes aia-enhance-prompt-long {
0%, 34% { opacity: 0; filter: blur(0.25em); translate: 0 0.3em; }
44%, 88% { opacity: 1; filter: blur(0); translate: 0 0; }
95%, 100% { opacity: 0; filter: blur(0.2em); translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-enhance-prompt * { animation: none !important; }
.aia-enhance-prompt-short { opacity: 0; }
.aia-enhance-prompt-long { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aia-enhance-prompt, .aia-enhance-prompt *, .aia-enhance-prompt::before, .aia-enhance-prompt::after, .aia-enhance-prompt *::before, .aia-enhance-prompt *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.