Labで開く
MCP
gsap typography
ターゲット: JS HTML
コード
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #050910;
color: #f2f6ff;
font-family: "Avenir Next", sans-serif;
}
.back {
position: fixed;
top: 14px;
left: 14px;
color: #86e8ff;
text-decoration: none;
}
main {
display: grid;
gap: 1.1rem;
text-align: center;
}
.line {
margin: 0;
font-size: clamp(1.8rem, 5vw, 4.3rem);
font-weight: 800;
}
.line span {
display: inline-block;
margin: 0 .3rem;
}if (!window.MotionPreference) {
const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
const __listeners = new Set();
const MotionPreference = {
prefersReducedMotion() {
return __mql.matches;
},
setOverride(value) {
const reduced = Boolean(value);
document.documentElement.classList.toggle("reduced-motion", reduced);
window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
for (const listener of __listeners) {
try {
listener({ reduced, override: reduced, systemReduced: __mql.matches });
} catch {}
}
},
onChange(listener) {
__listeners.add(listener);
try {
listener({
reduced: __mql.matches,
override: null,
systemReduced: __mql.matches,
});
} catch {}
return () => __listeners.delete(listener);
},
getState() {
return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
},
};
window.MotionPreference = MotionPreference;
}
const reduced = window.MotionPreference.prefersReducedMotion();
if (!reduced && window.gsap) {
window.gsap.utils.toArray(".line span").forEach((w, i) => {
window.gsap.fromTo(
w,
{ y: 38, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.45,
delay: i * 0.07,
ease: "back.out(1.4)",
}
);
});
}<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo 05 - Kinetic Typography</title><link rel="stylesheet" href="style.css" /></head>
<body>
<a class="back" href="../">Back</a>
<main>
<p class="line"><span>Build</span> <span>bold</span> <span>motion</span></p>
<p class="line"><span>Design</span> <span>with</span> <span>rhythm</span></p>
<p class="line"><span>Ship</span> <span>original</span> <span>experiences</span></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body></html>Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
Source
- Repository:
libs-gen - Original demo id:
05-kinetic-typography
Notes
Word-level animated text entrance pattern for energetic headlines.