ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

ch10-motion.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordch10-motion.html
DateNot specified in source
Path or archive memberarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch10-motion.html
Original SHA-2565a84463bd8311a6b6f18841fba8208ad1533563f0802e5e8a7d545fe1b638b42
Reading-copy SHA-2565a84463bd8311a6b6f18841fba8208ad1533563f0802e5e8a7d545fe1b638b42
Archive source{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch10-motion.html"}

Every recorded occurrence

These 4 records contain identical original source bytes. Their paths and revisions remain part of the archive.

Original recordBranch or archiveRevision / identifierOriginal location
ch10-motion.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch10-motion.html"}libsrc-dc03083b0f1carchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch10-motion.html
ch10-motion.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch10-motion.html"}libsrc-75b73923782barchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch10-motion.html
77c060f2da0007bc708ea977f9d2bf7a17bbdc0b{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/77/77c060f2da0007bc708ea977f9d2bf7a17bbdc0b"}libsrc-4a2e720d6082archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/77/77c060f2da0007bc708ea977f9d2bf7a17bbdc0b
77c060f2da0007bc708ea977f9d2bf7a17bbdc0b{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/77/77c060f2da0007bc708ea977f9d2bf7a17bbdc0b"}libsrc-2f12e7adac2darchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/77/77c060f2da0007bc708ea977f9d2bf7a17bbdc0b

Recovered source transcript

Download complete source text ↓2,265 lines · 60.7 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MEGAMIND | Motion Index</title> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #000; --bg-alt: #0a0a0a; --text: #fff; --muted: #888; --accent: #ff3366; --accent-alt: #ff6b8a; --blue: #00aaff; --cyan: #00ffff; --purple: #9966ff; --green: #00ff88; --gold: #ffd700; --sans: 'Outfit', sans-serif; --mono: 'JetBrains Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); cursor: none; overflow-x: hidden; } /* ========== CUSTOM CURSORS ========== */ .cursor-main { position: fixed; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 10000; mix-blend-mode: difference; transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), height 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s, background 0.3s; } .cursor-main.hover { width: 80px; height: 80px; background: rgba(255, 51, 102, 0.1); border-color: var(--blue); } .cursor-main.magnetic { width: 100px; height: 100px; background: rgba(0, 170, 255, 0.2); border-color: var(--cyan); } .cursor-main.text { width: 120px; height: 120px; background: transparent; border-color: var(--gold); } .cursor-main.text::after { content: 'VIEW'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-family: var(--mono); letter-spacing: 2px; color: var(--gold); } .cursor-main.hide { opacity: 0; transform: scale(0); } .cursor-dot { position: fixed; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 10001; transition: transform 0.1s, background 0.3s; } .cursor-dot.active { transform: scale(0); } .cursor-trail { position: fixed; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 9999; opacity: 0.5; } /* ========== SCROLL PROGRESS ========== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--blue), var(--purple), var(--green)); background-size: 300% 100%; z-index: 10000; width: 0%; animation: gradientShift 3s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ========== NAVIGATION ========== */ .nav { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 2rem 3rem; z-index: 100; mix-blend-mode: difference; } .nav-logo { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.3em; position: relative; } .nav-logo::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.3s; } .nav-logo:hover::after { width: 100%; } .nav-chapter { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--accent); } /* ========== HERO SECTION ========== */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 51, 102, 0.1) 0%, transparent 50%); animation: heroPulse 4s ease-in-out infinite; } @keyframes heroPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } .hero-title { font-size: clamp(5rem, 18vw, 16rem); font-weight: 900; line-height: 0.85; text-align: center; position: relative; z-index: 1; } .hero-title .word { display: block; overflow: hidden; } .hero-title .char { display: inline-block; opacity: 0; transform: translateY(100%) rotateX(-90deg); transform-origin: center bottom; } .hero-title .word:nth-child(2) .char { background: linear-gradient(135deg, var(--accent), var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 3rem; letter-spacing: 0.4em; opacity: 0; transform: translateY(30px); } .hero-scroll { position: absolute; bottom: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .hero-scroll-text { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--muted); writing-mode: vertical-rl; } .hero-scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { scaleY: 1; opacity: 1; } 50% { scaleY: 0.5; opacity: 0.5; } } /* ========== SECTION HEADERS ========== */ .section-header { padding: 4rem 3rem 2rem; text-align: center; } .section-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.4em; color: var(--accent); margin-bottom: 1rem; } .section-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; } .section-title .highlight { background: linear-gradient(135deg, var(--accent), var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ========== MAGNETIC BUTTONS ========== */ .magnetic-section { padding: 6rem 3rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .magnetic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; max-width: 1200px; margin: 3rem auto 0; } .magnetic-btn-wrapper { display: flex; justify-content: center; align-items: center; height: 150px; } .magnetic-btn { position: relative; padding: 1.5rem 3rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; border: none; cursor: pointer; overflow: hidden; transition: transform 0.1s; } .magnetic-btn.style-1 { background: transparent; color: var(--text); border: 2px solid var(--text); } .magnetic-btn.style-1::before { content: ''; position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .magnetic-btn.style-1:hover { color: var(--bg); } .magnetic-btn.style-1:hover::before { transform: scaleX(1); transform-origin: left; } .magnetic-btn.style-2 { background: linear-gradient(135deg, var(--accent), var(--purple)); color: var(--text); border-radius: 50px; } .magnetic-btn.style-2::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--blue), var(--cyan)); border-radius: 50px; opacity: 0; transition: opacity 0.3s; } .magnetic-btn.style-2:hover::before { opacity: 1; } .magnetic-btn.style-3 { background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: 8px; } .magnetic-btn.style-3::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--accent); border-radius: 50%; transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s; } .magnetic-btn.style-3:hover { color: var(--bg); } .magnetic-btn.style-3:hover::before { width: 300px; height: 300px; top: -75px; left: -75px; } .magnetic-btn.style-4 { background: var(--bg); color: var(--text); border: 2px solid var(--blue); clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); } .magnetic-btn.style-4::before { content: ''; position: absolute; inset: 0; background: var(--blue); transform: translateX(-100%); transition: transform 0.4s; } .magnetic-btn.style-4:hover::before { transform: translateX(0); } .magnetic-btn span { position: relative; z-index: 1; display: inline-block; transition: transform 0.3s; } .magnetic-btn:hover span { transform: scale(1.05); } /* ========== HOVER EFFECTS SHOWCASE ========== */ .hover-section { padding: 6rem 3rem; background: var(--bg-alt); } .hover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 1400px; margin: 3rem auto 0; } .hover-card { height: 400px; background: #111; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; } /* Card Style 1: Image reveal */ .hover-card.style-1 .card-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent), var(--purple)); opacity: 0.3; transition: opacity 0.5s, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .hover-card.style-1:hover .card-bg { opacity: 0.8; transform: scale(1.1) rotate(5deg); } .hover-card.style-1 .card-content { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%); } .hover-card.style-1 .card-icon { font-size: 3rem; margin-bottom: 1rem; transform: translateY(20px); opacity: 0; transition: all 0.5s 0.1s; } .hover-card.style-1:hover .card-icon { transform: translateY(0); opacity: 1; } /* Card Style 2: Border glow */ .hover-card.style-2 { border: 2px solid transparent; background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, var(--accent), var(--blue), var(--purple)) border-box; transition: box-shadow 0.5s; } .hover-card.style-2:hover { box-shadow: 0 0 40px rgba(255, 51, 102, 0.3), 0 0 80px rgba(0, 170, 255, 0.2); } .hover-card.style-2 .card-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem; } .hover-card.style-2 .card-ring { width: 100px; height: 100px; border: 3px solid var(--accent); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; transition: transform 0.5s, border-color 0.5s; } .hover-card.style-2:hover .card-ring { transform: scale(1.2) rotate(180deg); border-color: var(--blue); } /* Card Style 3: Slide reveal */ .hover-card.style-3 .card-front, .hover-card.style-3 .card-back { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: center; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .hover-card.style-3 .card-front { background: linear-gradient(135deg, #1a1a1a, #111); } .hover-card.style-3 .card-back { background: linear-gradient(135deg, var(--accent), var(--purple)); transform: translateY(100%); } .hover-card.style-3:hover .card-front { transform: translateY(-100%); } .hover-card.style-3:hover .card-back { transform: translateY(0); } /* Card Style 4: Magnetic tilt */ .hover-card.style-4 { transform-style: preserve-3d; perspective: 1000px; } .hover-card.style-4 .card-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem; transform-style: preserve-3d; } .hover-card.style-4 .card-float { transform: translateZ(50px); transition: transform 0.3s; } .card-number { font-family: var(--mono); font-size: 0.6rem; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 0.5rem; } .card-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .card-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.6; } /* ========== CUSTOM CURSOR PLAYGROUND ========== */ .cursor-section { padding: 6rem 3rem; min-height: 100vh; } .cursor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1200px; margin: 3rem auto 0; } .cursor-zone { height: 200px; border: 2px solid #222; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; transition: border-color 0.3s, background 0.3s; cursor: none; } .cursor-zone:hover { border-color: var(--accent); } .cursor-zone-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; } .cursor-zone-icon { font-size: 2rem; transition: transform 0.3s; } .cursor-zone:hover .cursor-zone-icon { transform: scale(1.2); } .cursor-zone[data-cursor="grow"] { --zone-color: var(--accent); } .cursor-zone[data-cursor="invert"] { --zone-color: var(--blue); } .cursor-zone[data-cursor="text"] { --zone-color: var(--gold); } .cursor-zone[data-cursor="hide"] { --zone-color: var(--purple); } .cursor-zone[data-cursor="trail"] { --zone-color: var(--green); } .cursor-zone[data-cursor="magnetic"] { --zone-color: var(--cyan); } .cursor-zone[data-cursor="emoji"] { --zone-color: var(--accent-alt); } .cursor-zone[data-cursor="spotlight"] { --zone-color: var(--gold); } .cursor-zone:hover { border-color: var(--zone-color); background: color-mix(in srgb, var(--zone-color) 5%, transparent); } /* ========== TEXT REVEAL ANIMATIONS ========== */ .text-section { padding: 6rem 3rem; background: var(--bg-alt); min-height: 100vh; } .text-examples { max-width: 1000px; margin: 4rem auto 0; } .text-example { margin-bottom: 6rem; } .text-example-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 1rem; text-transform: uppercase; } /* Reveal style 1: Slide up */ .reveal-slide-up { overflow: hidden; } .reveal-slide-up .word { display: inline-block; overflow: hidden; margin-right: 0.3em; } .reveal-slide-up .word-inner { display: inline-block; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .reveal-slide-up.in-view .word-inner { transform: translateY(0); } /* Reveal style 2: Fade letters */ .reveal-letters .char { display: inline-block; opacity: 0; transform: translateY(20px) rotateX(-40deg); transition: opacity 0.5s, transform 0.5s; } .reveal-letters.in-view .char { opacity: 1; transform: translateY(0) rotateX(0); } /* Reveal style 3: Typewriter */ .reveal-typewriter { font-family: var(--mono); border-right: 2px solid var(--accent); white-space: nowrap; overflow: hidden; width: 0; transition: none; } .reveal-typewriter.in-view { animation: typewriter 2s steps(40) forwards, blink 0.8s infinite; } @keyframes typewriter { to { width: 100%; } } @keyframes blink { 50% { border-color: transparent; } } /* Reveal style 4: Glitch */ .reveal-glitch { position: relative; } .reveal-glitch::before, .reveal-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0; } .reveal-glitch::before { color: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); } .reveal-glitch::after { color: var(--blue); clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); } .reveal-glitch.in-view::before, .reveal-glitch.in-view::after { animation: glitch 0.5s ease-out; } @keyframes glitch { 0%, 100% { opacity: 0; transform: translateX(0); } 20% { opacity: 0.8; transform: translateX(-5px); } 40% { opacity: 0.8; transform: translateX(5px); } 60% { opacity: 0.8; transform: translateX(-3px); } 80% { opacity: 0.8; transform: translateX(3px); } } .text-large { font-size: clamp(2rem, 6vw, 5rem); font-weight: 700; line-height: 1.1; } .text-medium { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 500; line-height: 1.4; } /* ========== 3D CARD FLIP ========== */ .flip-section { padding: 6rem 3rem; } .flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 3rem auto 0; } .flip-card { height: 400px; perspective: 1000px; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card.flip-x:hover .flip-card-inner { transform: rotateX(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; text-align: center; } .flip-card-front { background: linear-gradient(135deg, #1a1a1a, #111); border: 2px solid #333; } .flip-card-back { background: linear-gradient(135deg, var(--accent), var(--purple)); transform: rotateY(180deg); } .flip-card.flip-x .flip-card-back { transform: rotateX(180deg); } .flip-icon { font-size: 4rem; margin-bottom: 1.5rem; } .flip-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; } .flip-subtitle { font-size: 0.9rem; color: var(--muted); } .flip-card-back .flip-subtitle { color: rgba(255,255,255,0.8); } /* ========== ELASTIC/SPRING ANIMATIONS ========== */ .elastic-section { padding: 6rem 3rem; background: var(--bg-alt); min-height: 100vh; } .elastic-playground { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 3rem auto 0; } .elastic-item { height: 250px; background: #111; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; cursor: pointer; border: 2px solid #222; transition: border-color 0.3s; } .elastic-item:hover { border-color: var(--accent); } .elastic-shape { width: 80px; height: 80px; background: linear-gradient(135deg, var(--accent), var(--purple)); border-radius: 16px; transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .elastic-item[data-effect="bounce"]:hover .elastic-shape { animation: elasticBounce 0.6s; } .elastic-item[data-effect="squeeze"]:hover .elastic-shape { animation: elasticSqueeze 0.6s; } .elastic-item[data-effect="wobble"]:hover .elastic-shape { animation: elasticWobble 0.8s; } .elastic-item[data-effect="pulse"]:hover .elastic-shape { animation: elasticPulse 0.6s; } .elastic-item[data-effect="jelly"]:hover .elastic-shape { animation: elasticJelly 0.8s; } .elastic-item[data-effect="flip"]:hover .elastic-shape { animation: elasticFlip 0.8s; } @keyframes elasticBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-40px); } 50% { transform: translateY(10px); } 70% { transform: translateY(-15px); } 85% { transform: translateY(5px); } } @keyframes elasticSqueeze { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.3, 0.7); } 50% { transform: scale(0.8, 1.2); } 70% { transform: scale(1.1, 0.9); } } @keyframes elasticWobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-15deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } } @keyframes elasticPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.5); } 50% { transform: scale(1.15); box-shadow: 0 0 30px 10px rgba(255, 51, 102, 0.3); } } @keyframes elasticJelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } } @keyframes elasticFlip { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(360deg); } } .elastic-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; } /* ========== PARALLAX SECTIONS ========== */ .parallax-section { position: relative; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .parallax-bg { position: absolute; inset: -20%; background-size: cover; background-position: center; will-change: transform; } .parallax-section:nth-child(1) .parallax-bg { background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); opacity: 0.3; } .parallax-section:nth-child(2) .parallax-bg { background: radial-gradient(ellipse at center, var(--blue) 0%, transparent 70%); opacity: 0.3; } .parallax-content { position: relative; z-index: 1; text-align: center; max-width: 800px; padding: 2rem; } .parallax-title { font-size: clamp(3rem, 10vw, 8rem); font-weight: 900; line-height: 0.9; margin-bottom: 1.5rem; } .parallax-subtitle { font-size: 1.2rem; color: var(--muted); line-height: 1.6; } .parallax-floating { position: absolute; font-size: 8rem; opacity: 0.1; will-change: transform; } .parallax-floating:nth-child(1) { top: 10%; left: 10%; } .parallax-floating:nth-child(2) { top: 20%; right: 15%; } .parallax-floating:nth-child(3) { bottom: 15%; left: 20%; } .parallax-floating:nth-child(4) { bottom: 25%; right: 10%; } /* ========== SMOOTH SCROLL EFFECTS ========== */ .scroll-section { padding: 6rem 3rem; background: var(--bg-alt); } .scroll-demo { max-width: 1000px; margin: 3rem auto 0; } .scroll-item { display: flex; align-items: center; gap: 4rem; margin-bottom: 8rem; opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .scroll-item.in-view { opacity: 1; transform: translateY(0); } .scroll-item:nth-child(even) { flex-direction: row-reverse; } .scroll-visual { flex: 1; height: 300px; background: #111; border-radius: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 2px solid #222; } .scroll-visual-inner { width: 100px; height: 100px; background: linear-gradient(135deg, var(--accent), var(--blue)); border-radius: 20px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .scroll-item:hover .scroll-visual-inner { transform: rotate(45deg) scale(1.2); border-radius: 50%; } .scroll-content { flex: 1; } .scroll-number { font-family: var(--mono); font-size: 0.6rem; color: var(--accent); letter-spacing: 0.3em; margin-bottom: 1rem; } .scroll-title { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; } .scroll-desc { color: var(--muted); line-height: 1.7; } /* ========== INTERACTIVE MARQUEE ========== */ .marquee-section { padding: 4rem 0; overflow: hidden; border-top: 1px solid #222; border-bottom: 1px solid #222; background: var(--bg); } .marquee-row { display: flex; margin-bottom: 1rem; } .marquee-row:last-child { margin-bottom: 0; } .marquee-track { display: flex; animation: marquee 30s linear infinite; } .marquee-row:nth-child(even) .marquee-track { animation-direction: reverse; } .marquee-item { flex-shrink: 0; font-size: 4rem; font-weight: 700; padding: 0 2rem; color: transparent; -webkit-text-stroke: 1px var(--muted); transition: all 0.3s; cursor: pointer; } .marquee-item:hover { color: var(--text); -webkit-text-stroke: 0; transform: scale(1.1); } .marquee-item.accent:hover { color: var(--accent); } .marquee-item.blue:hover { color: var(--blue); } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ========== STATS COUNTER ========== */ .stats-section { padding: 6rem 3rem; background: linear-gradient(135deg, #0a0a0a, #111); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; } .stat-item { text-align: center; padding: 2rem; border: 2px solid transparent; border-radius: 20px; transition: all 0.5s; cursor: pointer; } .stat-item:hover { border-color: var(--accent); background: rgba(255, 51, 102, 0.05); transform: translateY(-10px); } .stat-value { font-size: 4rem; font-weight: 800; background: linear-gradient(135deg, var(--text), var(--muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.3s; } .stat-item:hover .stat-value { background: linear-gradient(135deg, var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; } .stat-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); margin-top: 0.5rem; } .stat-suffix { font-size: 2rem; opacity: 0.5; } /* ========== DRAGGABLE PLAYGROUND ========== */ .drag-section { padding: 6rem 3rem; min-height: 100vh; } .drag-container { max-width: 1200px; height: 500px; margin: 3rem auto 0; background: #0a0a0a; border-radius: 20px; border: 2px solid #222; position: relative; overflow: hidden; } .drag-item { position: absolute; width: 100px; height: 100px; border-radius: 16px; display: flex; justify-content: center; align-items: center; font-size: 2rem; cursor: grab; user-select: none; transition: transform 0.1s, box-shadow 0.3s; } .drag-item:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 20px 40px rgba(0,0,0,0.5); } .drag-item:nth-child(1) { background: linear-gradient(135deg, var(--accent), #ff6b8a); top: 50px; left: 50px; } .drag-item:nth-child(2) { background: linear-gradient(135deg, var(--blue), var(--cyan)); top: 150px; left: 200px; } .drag-item:nth-child(3) { background: linear-gradient(135deg, var(--purple), #cc66ff); top: 80px; left: 400px; } .drag-item:nth-child(4) { background: linear-gradient(135deg, var(--green), #66ffaa); top: 200px; left: 600px; } .drag-item:nth-child(5) { background: linear-gradient(135deg, var(--gold), #ffee66); top: 100px; left: 800px; } .drag-item:nth-child(6) { background: linear-gradient(135deg, #ff6666, #ff9999); top: 300px; left: 300px; border-radius: 50%; } .drag-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); } /* ========== CHAPTER NAVIGATION ========== */ .chapter-nav { display: flex; justify-content: space-between; padding: 3rem; border-top: 1px solid #222; background: var(--bg); } .chapter-nav a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--muted); text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 1rem; } .chapter-nav a:hover { color: var(--accent); } .chapter-nav a::before, .chapter-nav a::after { content: ''; width: 40px; height: 1px; background: currentColor; transition: width 0.3s; } .chapter-nav a:first-child::after { display: none; } .chapter-nav a:last-child::before { display: none; } .chapter-nav a:hover::before, .chapter-nav a:hover::after { width: 60px; } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .cursor-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav { padding: 1.5rem; } .cursor-main, .cursor-dot, .cursor-trail { display: none; } body { cursor: auto; } .magnetic-grid, .hover-grid, .flip-grid, .elastic-playground { grid-template-columns: 1fr; } .cursor-grid { grid-template-columns: 1fr; } .scroll-item { flex-direction: column !important; gap: 2rem; } .scroll-visual { width: 100%; } .stats-grid { grid-template-columns: 1fr 1fr; } .parallax-floating { display: none; } .drag-container { height: 400px; } .drag-item { width: 60px; height: 60px; font-size: 1.5rem; } } </style> </head> <body> <!-- Custom Cursors --> <div class="cursor-main"></div> <div class="cursor-dot"></div> <!-- Scroll Progress --> <div class="scroll-progress"></div> <!-- Navigation --> <nav class="nav"> <span class="nav-logo">MEGAMIND</span> <span class="nav-chapter">10 -- MOTION INDEX</span> </nav> <!-- Hero Section --> <section class="hero"> <div class="hero-bg"></div> <h1 class="hero-title"> <span class="word"><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> <span class="word"><span class="char">I</span><span class="char">N</span><span class="char">D</span><span class="char">E</span><span class="char">X</span></span> </h1> <p class="hero-subtitle">INTERACTIVE PLAYGROUND</p> <div class="hero-scroll"> <span class="hero-scroll-text">SCROLL TO EXPLORE</span> <div class="hero-scroll-line"></div> </div> </section> <!-- Magnetic Buttons Section --> <section class="magnetic-section"> <div class="section-header"> <div class="section-label">01 / INTERACTIONS</div> <h2 class="section-title">Magnetic <span class="highlight">Buttons</span></h2> </div> <div class="magnetic-grid"> <div class="magnetic-btn-wrapper"> <button class="magnetic-btn style-1"><span>SLIDE FILL</span></button> </div> <div class="magnetic-btn-wrapper"> <button class="magnetic-btn style-2"><span>GRADIENT MORPH</span></button> </div> <div class="magnetic-btn-wrapper"> <button class="magnetic-btn style-3"><span>CIRCLE EXPAND</span></button> </div> <div class="magnetic-btn-wrapper"> <button class="magnetic-btn style-4"><span>SLIDE WIPE</span></button> </div> </div> </section> <!-- Hover Effects Section --> <section class="hover-section"> <div class="section-header"> <div class="section-label">02 / HOVER STATES</div> <h2 class="section-title">Hover <span class="highlight">Effects</span></h2> </div> <div class="hover-grid"> <div class="hover-card style-1" data-cursor="text"> <div class="card-bg"></div> <div class="card-content"> <div class="card-icon">&#9733;</div> <div class="card-number">01</div> <div class="card-title">Scale & Reveal</div> <div class="card-desc">Background scales up while content fades in from below.</div> </div> </div> <div class="hover-card style-2" data-cursor="text"> <div class="card-content"> <div class="card-ring"> <span style="font-size: 2rem;">&#9830;</span> </div> <div class="card-number">02</div> <div class="card-title">Border Glow</div> <div class="card-desc">Gradient border with animated glow effect on hover.</div> </div> </div> <div class="hover-card style-3" data-cursor="text"> <div class="card-front"> <div class="card-number">03</div> <div class="card-title">Slide Reveal</div> <div class="card-desc">Front panel slides away to reveal colorful back.</div>

Search equations, builds, manuscript text, and recovered sources.