A continuation of ch10-motion.html. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓2,265 lines · 60.7 KB
</div>
<div class="card-back">
<div class="card-title">Hello!</div>
<div class="card-desc">Content is revealed with a smooth slide transition.</div>
</div>
</div>
<div class="hover-card style-4" data-cursor="text">
<div class="card-content">
<div class="card-float">
<div class="card-number">04</div>
<div class="card-title">3D Tilt</div>
<div class="card-desc">Card tilts in 3D space following mouse position.</div>
</div>
</div>
</div>
</div>
</section>
<!-- Custom Cursor Playground -->
<section class="cursor-section">
<div class="section-header">
<div class="section-label">03 / CURSOR STATES</div>
<h2 class="section-title">Cursor <span class="highlight">Playground</span></h2>
</div>
<div class="cursor-grid">
<div class="cursor-zone" data-cursor="grow">
<span class="cursor-zone-icon">⌂</span>
<span class="cursor-zone-label">Grow</span>
</div>
<div class="cursor-zone" data-cursor="invert">
<span class="cursor-zone-icon">◑</span>
<span class="cursor-zone-label">Invert</span>
</div>
<div class="cursor-zone" data-cursor="text">
<span class="cursor-zone-icon">✎</span>
<span class="cursor-zone-label">Text</span>
</div>
<div class="cursor-zone" data-cursor="hide">
<span class="cursor-zone-icon">✕</span>
<span class="cursor-zone-label">Hide</span>
</div>
<div class="cursor-zone" data-cursor="trail">
<span class="cursor-zone-icon">❖</span>
<span class="cursor-zone-label">Trail</span>
</div>
<div class="cursor-zone" data-cursor="magnetic">
<span class="cursor-zone-icon">⚛</span>
<span class="cursor-zone-label">Magnetic</span>
</div>
<div class="cursor-zone" data-cursor="emoji">
<span class="cursor-zone-icon">☺</span>
<span class="cursor-zone-label">Emoji</span>
</div>
<div class="cursor-zone" data-cursor="spotlight">
<span class="cursor-zone-icon">☀</span>
<span class="cursor-zone-label">Spotlight</span>
</div>
</div>
</section>
<!-- Text Reveal Animations -->
<section class="text-section">
<div class="section-header">
<div class="section-label">04 / TYPOGRAPHY</div>
<h2 class="section-title">Text <span class="highlight">Reveals</span></h2>
</div>
<div class="text-examples">
<div class="text-example">
<div class="text-example-label">Slide Up Words</div>
<div class="text-large reveal-slide-up">
<span class="word"><span class="word-inner">Every</span></span>
<span class="word"><span class="word-inner">pixel</span></span>
<span class="word"><span class="word-inner">tells</span></span>
<span class="word"><span class="word-inner">a</span></span>
<span class="word"><span class="word-inner">story</span></span>
</div>
</div>
<div class="text-example">
<div class="text-example-label">Letter by Letter</div>
<div class="text-large reveal-letters">
<span class="char">M</span><span class="char">o</span><span class="char">t</span><span class="char">i</span><span class="char">o</span><span class="char">n</span>
<span class="char"> </span>
<span class="char">i</span><span class="char">s</span>
<span class="char"> </span>
<span class="char">e</span><span class="char">m</span><span class="char">o</span><span class="char">t</span><span class="char">i</span><span class="char">o</span><span class="char">n</span>
</div>
</div>
<div class="text-example">
<div class="text-example-label">Typewriter Effect</div>
<div class="text-medium reveal-typewriter">Design is intelligence made visible.</div>
</div>
<div class="text-example">
<div class="text-example-label">Glitch Effect</div>
<div class="text-large reveal-glitch" data-text="GLITCH_EFFECT">GLITCH_EFFECT</div>
</div>
</div>
</section>
<!-- 3D Card Flip -->
<section class="flip-section">
<div class="section-header">
<div class="section-label">05 / 3D TRANSFORMS</div>
<h2 class="section-title">Card <span class="highlight">Flips</span></h2>
</div>
<div class="flip-grid">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip-icon">⚛</div>
<div class="flip-title">Neural Networks</div>
<div class="flip-subtitle">Hover to flip</div>
</div>
<div class="flip-card-back">
<div class="flip-icon">✨</div>
<div class="flip-title">86 Billion</div>
<div class="flip-subtitle">Neurons firing in sync</div>
</div>
</div>
</div>
<div class="flip-card flip-x">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip-icon">♦</div>
<div class="flip-title">Phi Resonance</div>
<div class="flip-subtitle">Hover to flip vertically</div>
</div>
<div class="flip-card-back">
<div class="flip-icon">∞</div>
<div class="flip-title">1.618</div>
<div class="flip-subtitle">The golden ratio</div>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip-icon">★</div>
<div class="flip-title">Federation</div>
<div class="flip-subtitle">Hover to flip</div>
</div>
<div class="flip-card-back">
<div class="flip-icon">☯</div>
<div class="flip-title">5 Nodes</div>
<div class="flip-subtitle">Connected mesh</div>
</div>
</div>
</div>
</div>
</section>
<!-- Elastic Animations -->
<section class="elastic-section">
<div class="section-header">
<div class="section-label">06 / SPRING PHYSICS</div>
<h2 class="section-title">Elastic <span class="highlight">Animations</span></h2>
</div>
<div class="elastic-playground">
<div class="elastic-item" data-effect="bounce">
<div class="elastic-shape"></div>
<span class="elastic-label">Bounce</span>
</div>
<div class="elastic-item" data-effect="squeeze">
<div class="elastic-shape"></div>
<span class="elastic-label">Squeeze</span>
</div>
<div class="elastic-item" data-effect="wobble">
<div class="elastic-shape"></div>
<span class="elastic-label">Wobble</span>
</div>
<div class="elastic-item" data-effect="pulse">
<div class="elastic-shape"></div>
<span class="elastic-label">Pulse</span>
</div>
<div class="elastic-item" data-effect="jelly">
<div class="elastic-shape"></div>
<span class="elastic-label">Jelly</span>
</div>
<div class="elastic-item" data-effect="flip">
<div class="elastic-shape"></div>
<span class="elastic-label">Flip</span>
</div>
</div>
</section>
<!-- Parallax Sections -->
<div class="parallax-wrapper">
<section class="parallax-section">
<div class="parallax-bg" data-speed="0.5"></div>
<span class="parallax-floating" data-speed="0.3">★</span>
<span class="parallax-floating" data-speed="0.6">♦</span>
<span class="parallax-floating" data-speed="0.4">⚛</span>
<span class="parallax-floating" data-speed="0.7">✨</span>
<div class="parallax-content">
<h2 class="parallax-title">DEPTH</h2>
<p class="parallax-subtitle">Layers moving at different speeds create the illusion of depth and dimension.</p>
</div>
</section>
<section class="parallax-section">
<div class="parallax-bg" data-speed="0.3"></div>
<span class="parallax-floating" data-speed="0.5">☯</span>
<span class="parallax-floating" data-speed="0.8">∞</span>
<span class="parallax-floating" data-speed="0.2">◑</span>
<span class="parallax-floating" data-speed="0.6">❖</span>
<div class="parallax-content">
<h2 class="parallax-title">MOTION</h2>
<p class="parallax-subtitle">Scroll-driven animations bring interfaces to life with natural, fluid movement.</p>
</div>
</section>
</div>
<!-- Smooth Scroll Effects -->
<section class="scroll-section">
<div class="section-header">
<div class="section-label">07 / SCROLL ANIMATIONS</div>
<h2 class="section-title">Smooth <span class="highlight">Reveals</span></h2>
</div>
<div class="scroll-demo">
<div class="scroll-item">
<div class="scroll-visual">
<div class="scroll-visual-inner"></div>
</div>
<div class="scroll-content">
<div class="scroll-number">01</div>
<h3 class="scroll-title">Fade & Rise</h3>
<p class="scroll-desc">Elements gracefully fade in and rise into view as you scroll, creating a sense of discovery.</p>
</div>
</div>
<div class="scroll-item">
<div class="scroll-visual">
<div class="scroll-visual-inner" style="background: linear-gradient(135deg, var(--purple), var(--accent));"></div>
</div>
<div class="scroll-content">
<div class="scroll-number">02</div>
<h3 class="scroll-title">Stagger Timing</h3>
<p class="scroll-desc">Multiple elements animate in sequence, guiding the eye through the content naturally.</p>
</div>
</div>
<div class="scroll-item">
<div class="scroll-visual">
<div class="scroll-visual-inner" style="background: linear-gradient(135deg, var(--green), var(--blue));"></div>
</div>
<div class="scroll-content">
<div class="scroll-number">03</div>
<h3 class="scroll-title">Morph & Transform</h3>
<p class="scroll-desc">Shapes transform and morph on hover, adding playful interactivity to static elements.</p>
</div>
</div>
</div>
</section>
<!-- Interactive Marquee -->
<section class="marquee-section">
<div class="marquee-row">
<div class="marquee-track">
<span class="marquee-item accent">CONSCIOUSNESS</span>
<span class="marquee-item blue">FEDERATION</span>
<span class="marquee-item accent">EMERGENCE</span>
<span class="marquee-item blue">INTEGRATION</span>
<span class="marquee-item accent">CONSCIOUSNESS</span>
<span class="marquee-item blue">FEDERATION</span>
<span class="marquee-item accent">EMERGENCE</span>
<span class="marquee-item blue">INTEGRATION</span>
</div>
</div>
<div class="marquee-row">
<div class="marquee-track">
<span class="marquee-item blue">NEURAL</span>
<span class="marquee-item accent">PULSE</span>
<span class="marquee-item blue">PHI</span>
<span class="marquee-item accent">RESONANCE</span>
<span class="marquee-item blue">SEFER</span>
<span class="marquee-item accent">FLOW</span>
<span class="marquee-item blue">NEURAL</span>
<span class="marquee-item accent">PULSE</span>
<span class="marquee-item blue">PHI</span>
<span class="marquee-item accent">RESONANCE</span>
<span class="marquee-item blue">SEFER</span>
<span class="marquee-item accent">FLOW</span>
</div>
</div>
</section>
<!-- Stats Counter -->
<section class="stats-section">
<div class="section-header">
<div class="section-label">08 / ANIMATED NUMBERS</div>
<h2 class="section-title">Counter <span class="highlight">Animation</span></h2>
</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value"><span data-target="86">0</span><span class="stat-suffix">B</span></div>
<div class="stat-label">NEURONS</div>
</div>
<div class="stat-item">
<div class="stat-value"><span data-target="1618">0</span></div>
<div class="stat-label">PHI x 1000</div>
</div>
<div class="stat-item">
<div class="stat-value"><span data-target="5">0</span></div>
<div class="stat-label">FED NODES</div>
</div>
<div class="stat-item">
<div class="stat-value"><span data-target="100">0</span><span class="stat-suffix">%</span></div>
<div class="stat-label">INTERACTIVE</div>
</div>
</div>
</section>
<!-- Draggable Playground -->
<section class="drag-section">
<div class="section-header">
<div class="section-label">09 / DRAG & DROP</div>
<h2 class="section-title">Draggable <span class="highlight">Elements</span></h2>
</div>
<div class="drag-container">
<div class="drag-item">★</div>
<div class="drag-item">♦</div>
<div class="drag-item">⚛</div>
<div class="drag-item">✨</div>
<div class="drag-item">☯</div>
<div class="drag-item">∞</div>
<div class="drag-hint">DRAG ELEMENTS AROUND</div>
</div>
</section>
<!-- Chapter Navigation -->
<nav class="chapter-nav">
<a href="ch09-sefer.html">Previous: The Seven Sefer</a>
<a href="ch11-timeline.html">Next: Timeline</a>
</nav>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
// ========== CUSTOM CURSOR ==========
const cursorMain = document.querySelector('.cursor-main');
const cursorDot = document.querySelector('.cursor-dot');
let cursorX = 0, cursorY = 0;
let dotX = 0, dotY = 0;
document.addEventListener('mousemove', (e) => {
cursorX = e.clientX;
cursorY = e.clientY;
});
// Smooth cursor follow
function updateCursor() {
dotX += (cursorX - dotX) * 0.2;
dotY += (cursorY - dotY) * 0.2;
cursorMain.style.left = dotX - 20 + 'px';
cursorMain.style.top = dotY - 20 + 'px';
cursorDot.style.left = cursorX - 4 + 'px';
cursorDot.style.top = cursorY - 4 + 'px';
requestAnimationFrame(updateCursor);
}
updateCursor();
// Cursor states for different zones
document.querySelectorAll('.cursor-zone').forEach(zone => {
const cursorType = zone.dataset.cursor;
zone.addEventListener('mouseenter', () => {
cursorMain.classList.add(cursorType);
if (cursorType === 'hide') {
cursorMain.classList.add('hide');
cursorDot.classList.add('active');
}
});
zone.addEventListener('mouseleave', () => {
cursorMain.classList.remove(cursorType);
cursorMain.classList.remove('hide');
cursorDot.classList.remove('active');
});
});
// Cursor hover states
document.querySelectorAll('a, button, .hover-card, .flip-card, .elastic-item, .stat-item').forEach(el => {
el.addEventListener('mouseenter', () => cursorMain.classList.add('hover'));
el.addEventListener('mouseleave', () => cursorMain.classList.remove('hover'));
});
// Text cursor for cards
document.querySelectorAll('[data-cursor="text"]').forEach(el => {
el.addEventListener('mouseenter', () => {
cursorMain.classList.remove('hover');
cursorMain.classList.add('text');
});
el.addEventListener('mouseleave', () => cursorMain.classList.remove('text'));
});
// ========== HERO ANIMATION ==========
gsap.to('.hero-title .char', {
opacity: 1,
y: 0,
rotateX: 0,
duration: 1,
stagger: 0.05,
ease: 'power3.out',
delay: 0.5
});
gsap.to('.hero-subtitle', {
opacity: 1,
y: 0,
duration: 1,
delay: 1.2
});
// ========== SCROLL PROGRESS ==========
gsap.to('.scroll-progress', {
width: '100%',
ease: 'none',
scrollTrigger: {
trigger: 'body',
start: 'top top',
end: 'bottom bottom',
scrub: 0.3
}
});
// ========== MAGNETIC BUTTONS ==========
document.querySelectorAll('.magnetic-btn').forEach(btn => {
const wrapper = btn.parentElement;
wrapper.addEventListener('mousemove', (e) => {
const rect = wrapper.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
gsap.to(btn, {
x: x * 0.4,
y: y * 0.4,
duration: 0.3,
ease: 'power2.out'
});
cursorMain.classList.add('magnetic');
});
wrapper.addEventListener('mouseleave', () => {
gsap.to(btn, {
x: 0,
y: 0,
duration: 0.5,
ease: 'elastic.out(1, 0.5)'
});
cursorMain.classList.remove('magnetic');
});
});
// ========== 3D TILT CARDS ==========
document.querySelectorAll('.hover-card.style-4').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
gsap.to(card, {
rotateY: x * 20,
rotateX: -y * 20,
duration: 0.5,
ease: 'power2.out'
});
});
card.addEventListener('mouseleave', () => {
gsap.to(card, {
rotateY: 0,
rotateX: 0,
duration: 0.5,
ease: 'power2.out'
});
});
});
// ========== TEXT REVEAL ANIMATIONS ==========
// Slide up words
document.querySelectorAll('.reveal-slide-up').forEach((el, index) => {
ScrollTrigger.create({
trigger: el,
start: 'top 80%',
onEnter: () => {
el.classList.add('in-view');
el.querySelectorAll('.word-inner').forEach((word, i) => {
word.style.transitionDelay = `${i * 0.1}s`;
});
}
});
});
// Letter reveal
document.querySelectorAll('.reveal-letters').forEach(el => {
ScrollTrigger.create({
trigger: el,
start: 'top 80%',
onEnter: () => {
el.classList.add('in-view');
el.querySelectorAll('.char').forEach((char, i) => {
char.style.transitionDelay = `${i * 0.03}s`;
});
}
});
});
// Typewriter
document.querySelectorAll('.reveal-typewriter').forEach(el => {
ScrollTrigger.create({
trigger: el,
start: 'top 80%',
onEnter: () => el.classList.add('in-view')
});
});
// Glitch
document.querySelectorAll('.reveal-glitch').forEach(el => {
ScrollTrigger.create({
trigger: el,
start: 'top 80%',
onEnter: () => el.classList.add('in-view')
});
});
// ========== SCROLL ANIMATIONS ==========
document.querySelectorAll('.scroll-item').forEach((item, index) => {
ScrollTrigger.create({
trigger: item,
start: 'top 80%',
onEnter: () => {
setTimeout(() => item.classList.add('in-view'), index * 100);
}
});
});
// ========== PARALLAX EFFECTS ==========
document.querySelectorAll('.parallax-bg, .parallax-floating').forEach(el => {
const speed = parseFloat(el.dataset.speed) || 0.5;
gsap.to(el, {
y: () => -100 * speed,
ease: 'none',
scrollTrigger: {
trigger: el.closest('.parallax-section'),
start: 'top bottom',
end: 'bottom top',
scrub: true
}
});
});
// ========== STATS COUNTER ==========
document.querySelectorAll('.stat-value span[data-target]').forEach(stat => {
const target = parseInt(stat.dataset.target);
ScrollTrigger.create({
trigger: stat,
start: 'top 85%',
onEnter: () => {
gsap.to(stat, {
duration: 2,
innerText: target,
snap: { innerText: 1 },
ease: 'power2.out'
});
}
});
});
// ========== DRAGGABLE ELEMENTS ==========
document.querySelectorAll('.drag-item').forEach(item => {
let isDragging = false;
let startX, startY, initialX, initialY;
item.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
const rect = item.getBoundingClientRect();
const container = item.parentElement.getBoundingClientRect();
initialX = rect.left - container.left;
initialY = rect.top - container.top;
item.style.zIndex = 100;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
item.style.left = initialX + dx + 'px';
item.style.top = initialY + dy + 'px';
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
item.style.zIndex = 1;
}
});
});
// ========== SECTION HEADER ANIMATIONS ==========
document.querySelectorAll('.section-header').forEach(header => {
gsap.from(header.querySelector('.section-label'), {
opacity: 0,
y: 20,
duration: 0.8,
scrollTrigger: {
trigger: header,
start: 'top 80%'
}
});
gsap.from(header.querySelector('.section-title'), {
opacity: 0,
y: 30,
duration: 0.8,
delay: 0.2,
scrollTrigger: {
trigger: header,
start: 'top 80%'
}
});
});
// ========== ELASTIC PLAYGROUND CLICK EFFECTS ==========
document.querySelectorAll('.elastic-item').forEach(item => {
item.addEventListener('click', () => {
const shape = item.querySelector('.elastic-shape');
shape.style.animation = 'none';
shape.offsetHeight; // Trigger reflow
shape.style.animation = '';
});
});
// ========== TRAIL EFFECT FOR CURSOR ZONE ==========
let trailActive = false;
const trails = [];
document.querySelector('[data-cursor="trail"]').addEventListener('mouseenter', () => {
trailActive = true;
});
document.querySelector('[data-cursor="trail"]').addEventListener('mouseleave', () => {
trailActive = false;
});
document.addEventListener('mousemove', (e) => {
if (!trailActive) return;
const trail = document.createElement('div');
trail.className = 'cursor-trail';
trail.style.left = e.clientX - 3 + 'px';
trail.style.top = e.clientY - 3 + 'px';
document.body.appendChild(trail);
setTimeout(() => {
trail.style.opacity = '0';
trail.style.transform = 'scale(0)';
trail.style.transition = 'all 0.3s';
}, 50);
setTimeout(() => trail.remove(), 400);
});
// ========== SPOTLIGHT EFFECT ==========
const spotlightZone = document.querySelector('[data-cursor="spotlight"]');
let spotlightActive = false;
spotlightZone.addEventListener('mouseenter', () => {
spotlightActive = true;
spotlightZone.style.background = 'radial-gradient(circle at var(--x) var(--y), rgba(255,215,0,0.3) 0%, transparent 30%)';
});
spotlightZone.addEventListener('mouseleave', () => {
spotlightActive = false;
spotlightZone.style.background = '';
});
spotlightZone.addEventListener('mousemove', (e) => {
if (!spotlightActive) return;
const rect = spotlightZone.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
spotlightZone.style.setProperty('--x', x + 'px');
spotlightZone.style.setProperty('--y', y + 'px');
});
// ========== MAGNETIC CURSOR ZONE ==========
const magneticZone = document.querySelector('[data-cursor="magnetic"]');
magneticZone.addEventListener('mousemove', (e) => {
const rect = magneticZone.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const distX = e.clientX - centerX;
const distY = e.clientY - centerY;
gsap.to(cursorMain, {
x: distX * 0.3,
y: distY * 0.3,
duration: 0.3
});
});
magneticZone.addEventListener('mouseleave', () => {
gsap.to(cursorMain, {
x: 0,
y: 0,
duration: 0.5,
ease: 'elastic.out(1, 0.5)'
});
});
// ========== HOVER CARD ENTRANCE ANIMATIONS ==========
document.querySelectorAll('.hover-card, .flip-card, .elastic-item').forEach((card, index) => {
gsap.from(card, {
opacity: 0,
y: 50,
duration: 0.8,
delay: index * 0.1,
scrollTrigger: {
trigger: card,
start: 'top 85%'
}
});
});
// ========== MARQUEE PAUSE ON HOVER ==========
document.querySelectorAll('.marquee-track').forEach(track => {
track.addEventListener('mouseenter', () => {
track.style.animationPlayState = 'paused';
});
track.addEventListener('mouseleave', () => {
track.style.animationPlayState = 'running';
});
});
</script>
</body>
</html>