Skywriter
React + Tailwind
import { useId, useLayoutEffect, useRef, useState } from 'react';
const css = `
/* Each letter puffs out of the smoke: small and soft, then full size and sharp. */
@keyframes field-skywrite-puff { 0% { transform: scale(0.3); filter: blur(4px); opacity: 0; } 45% { transform: scale(1.18); filter: blur(1.5px); opacity: 1; } 100% { transform: none; filter: blur(0); } }
@keyframes field-skywrite-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes field-skywrite-cloud { from { transform: translateX(0); } to { transform: translateX(-340px); } }
@keyframes field-skywrite-smoke { 0% { transform: translateX(0) scale(0.5); opacity: 0.7; } 100% { transform: translateX(-22px) scale(1.6); opacity: 0; } }
.field-skywrite { width: 300px; }
.field-skywrite__label { display: block; margin-bottom: 8px; color: light-dark(#50535b, #c6c8cd); font-size: 12px; }
.field-skywrite__sky { position: relative; height: 112px; overflow: hidden; border-radius: 14px; background: light-dark(#f3f4f7, #1a1c1f); }
.field-skywrite__sky:focus-within { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
.field-skywrite__cloud { position: absolute; width: 60px; height: 18px; border-radius: 999px; background: light-dark(#ebedf0, #232529); animation: field-skywrite-cloud 40s linear infinite; }
.field-skywrite__cloud::before { content: ''; position: absolute; left: 14px; top: -10px; width: 26px; height: 22px; border-radius: 50%; background: inherit; }
.field-skywrite__input, .field-skywrite__mirror {
box-sizing: border-box;
padding: 0 16px;
font: 700 26px/44px ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
letter-spacing: 1px;
font-kerning: none;
font-variant-ligatures: none;
}
.field-skywrite__input { position: absolute; left: 0; top: 36px; width: 100%; height: 44px; margin: 0; border: 0; outline: none; background: transparent; color: transparent; caret-color: light-dark(#5f626a, #a7abb2); }
/* Empty, the hint starts just past the waiting plane. */
.field-skywrite__input:placeholder-shown { padding-left: 60px; }
.field-skywrite__input::placeholder { color: light-dark(#6d7179, #7d8087); font-size: 18px; font-weight: 500; }
.field-skywrite__input::selection { background: light-dark(#cbced3, #393c41); }
.field-skywrite__mirror { position: absolute; left: 0; top: 36px; height: 44px; color: light-dark(#42454c, #e5e6e9); white-space: pre; pointer-events: none; text-shadow: 0 0 8px color-mix(in srgb, light-dark(#42454c, #e5e6e9) 45%, transparent); }
.field-skywrite__ch { display: inline-block; }
.field-skywrite__ch--new { animation: field-skywrite-puff 0.45s ease-out; }
/* The plane is the caret: it flies to just past the last letter. */
.field-skywrite__plane { position: absolute; left: 0; top: 40px; width: 38px; height: 22px; transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1); }
.field-skywrite__plane svg { display: block; width: 38px; height: 22px; overflow: visible; animation: field-skywrite-bob 1.6s ease-in-out infinite; }
.field-skywrite__body { fill: light-dark(#50535b, #c6c8cd); }
.field-skywrite__wing { fill: light-dark(#5f626a, #a7abb2); }
.field-skywrite__window { fill: light-dark(#ebedf0, #232529); }
.field-skywrite__smoke { fill: light-dark(#5f626a, #a7abb2); transform-box: fill-box; transform-origin: center; animation: field-skywrite-smoke 0.9s ease-out infinite; }
.field-skywrite__smoke + .field-skywrite__smoke { animation-delay: -0.45s; }
.field-skywrite__sky:not(:focus-within) .field-skywrite__smoke { animation-play-state: paused; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.field-skywrite__plane { transition: none; }
.field-skywrite__plane svg, .field-skywrite__cloud, .field-skywrite__ch--new, .field-skywrite__smoke { animation: none; }
}
`;
export function SkywriteInput() {
const id = useId();
const [v, setV] = useState('');
const [grew, setGrew] = useState(false);
const [x, setX] = useState(16);
const line = useRef<HTMLSpanElement>(null);
// Fly to the end of the text, but never off the edge of the sky.
useLayoutEffect(() => setX(Math.min(16 + (line.current?.offsetWidth ?? 0) + 4, 256)), [v]);
return (
<>
<style>
{css}
</style>
<div className="field-skywrite">
<label className="field-skywrite__label" htmlFor={id}>
Sky message
</label>
<div className="field-skywrite__sky">
<span className="field-skywrite__cloud" style={{ left: '210px', top: '14px' }} aria-hidden="true" />
<span className="field-skywrite__cloud" style={{ left: '360px', top: '84px', animationDelay: '-18s' }} aria-hidden="true" />
<span className="field-skywrite__mirror" aria-hidden="true">
<span ref={line}>
{[...v].map((ch, i) => (
<span key={`${i}${ch}`} className={`field-skywrite__ch${grew && i === v.length - 1 ? ' field-skywrite__ch--new' : ''}`}>
{ch}
</span>
))}
</span>
</span>
<input
id={id}
className="field-skywrite__input"
value={v}
maxLength={14}
placeholder="Write in the sky"
autoComplete="off"
spellCheck={false}
onChange={(e) => {
setGrew(e.target.value.length > v.length);
setV(e.target.value);
}}
/>
<span className="field-skywrite__plane" style={{ transform: `translateX(${x}px)` }} aria-hidden="true">
<svg viewBox="0 0 38 22">
<circle className="field-skywrite__smoke" cx="2" cy="12" r="3" />
<circle className="field-skywrite__smoke" cx="2" cy="12" r="3" />
<path className="field-skywrite__wing" d="M14 12L22 21H26L22 12Z" />
<path className="field-skywrite__body" d="M6 9L8 4H11L14 9H30Q36 9 36 12Q36 15 30 15H10Q6 15 6 12Z" />
<path className="field-skywrite__wing" d="M17 10L22 2H25.5L23 10Z" />
<path className="field-skywrite__window" d="M28 10.5H32Q33.5 10.5 33.8 12H28Z" />
</svg>
</span>
</div>
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldSkywrite(el) on the mounted element instead.
HTML
<div class="field-skywrite">
<label class="field-skywrite__label" for="field-skywrite">Sky message</label>
<div class="field-skywrite__sky">
<span class="field-skywrite__cloud" style="left:210px;top:14px" aria-hidden="true"></span>
<span class="field-skywrite__cloud" style="left:360px;top:84px;animation-delay:-18s" aria-hidden="true"></span>
<span class="field-skywrite__mirror" aria-hidden="true"><span></span></span>
<input id="field-skywrite" class="field-skywrite__input" maxLength="14" placeholder="Write in the sky" autoComplete="off" spellCheck="false" value=""/>
<span class="field-skywrite__plane" style="transform:translateX(16px)" aria-hidden="true">
<svg viewBox="0 0 38 22">
<circle class="field-skywrite__smoke" cx="2" cy="12" r="3"></circle>
<circle class="field-skywrite__smoke" cx="2" cy="12" r="3"></circle>
<path class="field-skywrite__wing" d="M14 12L22 21H26L22 12Z"></path>
<path class="field-skywrite__body" d="M6 9L8 4H11L14 9H30Q36 9 36 12Q36 15 30 15H10Q6 15 6 12Z"></path>
<path class="field-skywrite__wing" d="M17 10L22 2H25.5L23 10Z"></path>
<path class="field-skywrite__window" d="M28 10.5H32Q33.5 10.5 33.8 12H28Z"></path>
</svg>
</span>
</div>
</div>CSS
/* Each letter puffs out of the smoke: small and soft, then full size and sharp. */
@keyframes field-skywrite-puff { 0% { transform: scale(0.3); filter: blur(4px); opacity: 0; } 45% { transform: scale(1.18); filter: blur(1.5px); opacity: 1; } 100% { transform: none; filter: blur(0); } }
@keyframes field-skywrite-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes field-skywrite-cloud { from { transform: translateX(0); } to { transform: translateX(-340px); } }
@keyframes field-skywrite-smoke { 0% { transform: translateX(0) scale(0.5); opacity: 0.7; } 100% { transform: translateX(-22px) scale(1.6); opacity: 0; } }
.field-skywrite { width: 300px; }
.field-skywrite__label { display: block; margin-bottom: 8px; color: light-dark(#50535b, #c6c8cd); font-size: 12px; }
.field-skywrite__sky { position: relative; height: 112px; overflow: hidden; border-radius: 14px; background: light-dark(#f3f4f7, #1a1c1f); }
.field-skywrite__sky:focus-within { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
.field-skywrite__cloud { position: absolute; width: 60px; height: 18px; border-radius: 999px; background: light-dark(#ebedf0, #232529); animation: field-skywrite-cloud 40s linear infinite; }
.field-skywrite__cloud::before { content: ''; position: absolute; left: 14px; top: -10px; width: 26px; height: 22px; border-radius: 50%; background: inherit; }
.field-skywrite__input, .field-skywrite__mirror {
box-sizing: border-box;
padding: 0 16px;
font: 700 26px/44px ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
letter-spacing: 1px;
font-kerning: none;
font-variant-ligatures: none;
}
.field-skywrite__input { position: absolute; left: 0; top: 36px; width: 100%; height: 44px; margin: 0; border: 0; outline: none; background: transparent; color: transparent; caret-color: light-dark(#5f626a, #a7abb2); }
/* Empty, the hint starts just past the waiting plane. */
.field-skywrite__input:placeholder-shown { padding-left: 60px; }
.field-skywrite__input::placeholder { color: light-dark(#6d7179, #7d8087); font-size: 18px; font-weight: 500; }
.field-skywrite__input::selection { background: light-dark(#cbced3, #393c41); }
.field-skywrite__mirror { position: absolute; left: 0; top: 36px; height: 44px; color: light-dark(#42454c, #e5e6e9); white-space: pre; pointer-events: none; text-shadow: 0 0 8px color-mix(in srgb, light-dark(#42454c, #e5e6e9) 45%, transparent); }
.field-skywrite__ch { display: inline-block; }
.field-skywrite__ch--new { animation: field-skywrite-puff 0.45s ease-out; }
/* The plane is the caret: it flies to just past the last letter. */
.field-skywrite__plane { position: absolute; left: 0; top: 40px; width: 38px; height: 22px; transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1); }
.field-skywrite__plane svg { display: block; width: 38px; height: 22px; overflow: visible; animation: field-skywrite-bob 1.6s ease-in-out infinite; }
.field-skywrite__body { fill: light-dark(#50535b, #c6c8cd); }
.field-skywrite__wing { fill: light-dark(#5f626a, #a7abb2); }
.field-skywrite__window { fill: light-dark(#ebedf0, #232529); }
.field-skywrite__smoke { fill: light-dark(#5f626a, #a7abb2); transform-box: fill-box; transform-origin: center; animation: field-skywrite-smoke 0.9s ease-out infinite; }
.field-skywrite__smoke + .field-skywrite__smoke { animation-delay: -0.45s; }
.field-skywrite__sky:not(:focus-within) .field-skywrite__smoke { animation-play-state: paused; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.field-skywrite__plane { transition: none; }
.field-skywrite__plane svg, .field-skywrite__cloud, .field-skywrite__ch--new, .field-skywrite__smoke { animation: none; }
}JavaScript
function initFieldSkywrite(root) {
var input = root.querySelector('.field-skywrite__input');
var line = root.querySelector('.field-skywrite__mirror').firstElementChild;
var plane = root.querySelector('.field-skywrite__plane');
var v = '';
function onInput() {
var next = input.value;
var grew = next.length > v.length;
v = next;
for (var i = 0; i < v.length; i++) {
var span = line.children[i];
if (span && span.textContent === v[i]) {
span.classList.remove('field-skywrite__ch--new');
continue;
}
var fresh = document.createElement('span');
fresh.className = 'field-skywrite__ch';
fresh.textContent = v[i];
if (span) line.replaceChild(fresh, span);
else line.appendChild(fresh);
}
while (line.children.length > v.length) line.lastChild.remove();
// The newest letter puffs out of the smoke trail.
if (grew && line.lastChild) line.lastChild.classList.add('field-skywrite__ch--new');
// The plane is the caret: it flies to just past the last letter, never off the edge of the sky.
plane.style.transform = 'translateX(' + Math.min(16 + line.offsetWidth + 4, 256) + 'px)';
}
input.addEventListener('input', onInput);
return function () {
input.removeEventListener('input', onInput);
};
}
document.querySelectorAll('.field-skywrite').forEach(initFieldSkywrite);Goal: Create a "Skywriter" input.
Visual behavior: A small plane writes your text across the sky: it flies just ahead of the caret and each letter puffs out of its smoke trail.
Technique:
- A real input with transparent text sits under a mirror of the value set in the same font and metrics, so the caret, selection and typing all still work while the mirror draws the letters.
- The mirror's width is measured after each change and the plane flies to just past it with a transform transition. The newest letter puffs in from small and blurred to sharp with a filter keyframe; the plane bobs on a loop and trails smoke while the field has focus, and clouds drift behind.
Accessibility: A real input with a visible <label>; the mirror, plane and clouds are aria-hidden. Under prefers-reduced-motion the plane jumps and letters appear without the puff.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Skywriter" input.
Visual behavior: A small plane writes your text across the sky: it flies just ahead of the caret and each letter puffs out of its smoke trail.
Technique:
- A real input with transparent text sits under a mirror of the value set in the same font and metrics, so the caret, selection and typing all still work while the mirror draws the letters.
- The mirror's width is measured after each change and the plane flies to just past it with a transform transition. The newest letter puffs in from small and blurred to sharp with a filter keyframe; the plane bobs on a loop and trails smoke while the field has focus, and clouds drift behind.
Accessibility: A real input with a visible <label>; the mirror, plane and clouds are aria-hidden. Under prefers-reduced-motion the plane jumps and letters appear without the puff.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
A small plane writes your text across the sky: it flies just ahead of the caret and each letter puffs out of its smoke trail.
- Dependencies
- None
- Difficulty
- Intermediate
- Triggers
- state change, keyframe, loop
- Techniques
- keyframes, filter, css transition
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
A real input with a visible <label>; the mirror, plane and clouds are aria-hidden. Under prefers-reduced-motion the plane jumps and letters appear without the puff.