入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。文字数に応じて自動で stagger delay も調整されます。
<div class="split-text"> <span>A</span><span>R</span><span>C</span> <span>H</span><span>I</span><span>T</span> <span>E</span><span>C</span><span>T</span> </div>
.split-text {
font-family: 'Oswald', sans-serif;
font-size: 5rem;
font-weight: 600;
letter-spacing: 0.15em;
color: #1A1A1A;
display: flex;
gap: 0.05em;
cursor: pointer;
}
.split-text span {
display: inline-block;
transform: translateY(0);
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
color 0.4s ease;
}
.split-text:hover span {
transform: translateY(-20px);
color: #E91B89;
}
/* Stagger each character */
.split-text:hover span:nth-child(1) { transition-delay: 0.00s; }
.split-text:hover span:nth-child(2) { transition-delay: 0.04s; }
.split-text:hover span:nth-child(3) { transition-delay: 0.08s; }
.split-text:hover span:nth-child(4) { transition-delay: 0.12s; }
.split-text:hover span:nth-child(5) { transition-delay: 0.16s; }
/* ... continue for each character ... */
@media (prefers-reduced-motion: reduce) {
.split-text span { transition: color 0.4s ease; }
.split-text:hover span { transform: none; }
}Implement a "Text Split" stagger animation. Behavior: - Each character of the target text wraps in its own <span>. - On parent hover, every character translateY(-20px) and shifts color to brand accent (#E91B89). - Stagger: each subsequent character has +0.04s transition-delay. - Easing: cubic-bezier(0.65, 0, 0.35, 1), duration 0.6s. Constraints: - Pure CSS preferred. Use :nth-child for stagger. - If the text is dynamic, use vanilla JS to wrap each char on load. - Respect prefers-reduced-motion: keep color transition only. Output: HTML structure + CSS. If JS char-wrapping is needed, include it as a 3rd block.
Build a "Text Split" hover animation:
Approach:
- Wrap each character of the heading in <span>.
- Display the parent as flex with small gap (0.05em).
- On parent:hover, each span translates Y -20px with staggered transition-delay.
Stagger formula: delay = index * 0.04s
Easing: cubic-bezier(0.65, 0, 0.35, 1), 0.6s
Color shift on hover: #1A1A1A → #E91B89
For dynamic text, generate this JS helper:
function splitChars(el) {
el.innerHTML = [...el.textContent].map(c =>
c === ' ' ? ' ' : `<span>${c}</span>`
).join('');
}
A11y: @media (prefers-reduced-motion: reduce) → no transform, only color.Create a React component <SplitText> with props:
- text: string
- triggerOn?: 'hover' | 'view' (default 'hover')
- staggerMs?: number (default 40)
Implementation:
- Split text into characters: [...text].map((char, i) => ...)
- Render each as a <span> with style={{ transitionDelay: `${i * staggerMs}ms` }}
- Wrap in a container with relative positioning.
Tailwind:
- Container: inline-flex gap-[0.05em] cursor-pointer
- Each span: inline-block transition-all duration-[600ms] ease-[cubic-bezier(0.65,0,0.35,1)]
- On group-hover: translate-y-[-20px] text-pink-600 (or arbitrary #E91B89)
Use group + group-hover utilities for the parent-controlled hover.
Honor prefers-reduced-motion via Tailwind motion-safe: variants.