Vanilla

[{"id":"d710fe7b-3b59-4569-91d8-77f4b26a8338","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f007c83e-37b0-4d9a-8ab0-a47825c27ad3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"html,\\nbody {\\n margin: 0;\\n padding: 0;\\n}\\n\\nmain {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n width: 100%;\\n height: 100vh;\\n background: #0e100f;\\n background-blend-mode: color-dodge;\\n}\\n\\n.logo-outer {\\n width: 50%;\\n height: 50%;\\n background: radial-gradient(89.08% 84.62% at 16.54% 78.46%,#fbfefa 0%,#c9f6b4 39.58%,#abff84 77.6%,#2fee65 100%),\\n url(\\\"https://assets.codepen.io/16327/noise-e82662fe.png\\\");\\n border-radius: 3rem;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\nsvg.logo {\\n width: 66%;\\n max-height: 66%;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n \\n\\n\\n

\\n

\\n \\n

\\n

wiggle your mouse around.

\\n

\\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n $\\\"\\\"$ \\n

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"function playAnimation(shape) {\\n // the timeline\\n let tl = gsap.timeline();\\n tl.from(shape,{\\n opacity: 0,\\n scale: 0,\\n ease: \\\"elastic.out(1,0.3)\\\",\\n })\\n .to(shape,{\\n rotation: \\\"random([-360, 360])\\\",\\n }, \\\"<\\\")\\n .to(shape,{\\n y: \\\"120vh\\\",\\n ease: \\\"back.in(.4)\\\",\\n duration: 1,\\n },0)\\n \\n}\\n\\n/* --------------------------------\\n\\nThe other stuff...\\n\\n------------------------------------*/\\nlet flair = gsap.utils.toArray(\\\".flair\\\");\\nlet gap = 100; // if you're nosy though, this number spaces the 'lil shapes out\\nlet index = 0;\\nlet wrapper = gsap.utils.wrap(0, flair.length);\\ngsap.defaults({duration: 1})\\n\\nlet mousePos = { x: 0, y: 0 };\\nlet lastMousePos = mousePos;\\nlet cachedMousePos = mousePos;\\n\\nwindow.addEventListener(\\\"mousemove\\\", (e) => {\\n mousePos = {\\n x: e.x,\\n y: e.y\\n };\\n});\\n\\ngsap.ticker.add(ImageTrail);\\n\\nfunction ImageTrail() {\\n let travelDistance = Math.hypot(\\n lastMousePos.x - mousePos.x,\\n lastMousePos.y - mousePos.y\\n );\\n\\n // keep the previous mouse position for animation\\n cachedMousePos.x = gsap.utils.interpolate(\\n cachedMousePos.x || mousePos.x,\\n mousePos.x,\\n 0.1\\n );\\n cachedMousePos.y = gsap.utils.interpolate(\\n cachedMousePos.y || mousePos.y,\\n mousePos.y,\\n 0.1\\n );\\n\\n if (travelDistance > gap) {\\n animateImage();\\n lastMousePos = mousePos;\\n }\\n}\\n\\nfunction animateImage() {\\n let wrappedIndex = wrapper(index);\\n\\n console.log(index, flair.length);\\n\\n let img = flair[wrappedIndex];\\n gsap.killTweensOf(img);\\n \\n gsap.set(img, {\\n clearProps: \\\"all\\\",\\n });\\n \\n\\n gsap.set(img, {\\n opacity: 1,\\n left: mousePos.x,\\n top: mousePos.y,\\n xPercent: -50,\\n yPercent: -50,\\n });\\n\\n playAnimation(img);\\n\\n index++;\\n}\\n\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"0c10ad6f-57a5-4d00-a112-dc36202fd064","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a41c3214-49bc-4f41-8b58-b01049691f09","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f3b3af63-7523-4cfe-8575-4a1864f51364","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\".flair {\\n width: 120px;\\n height: 120px;\\n\\n /* ✅ Online image */\\n background-image: url(\\\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=300\\\");\\n background-size: cover;\\n background-position: center;\\n background-repeat: no-repeat;\\n\\n border-radius: 50%;\\n position: fixed;\\n top: 0;\\n left: 0;\\n\\n pointer-events: none;\\n\\n /* ✨ make it feel premium */\\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\\n will-change: transform;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n \\n\\n\\n

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"// requires GSAP 3.10.0 or later\\n// older quickSetter version: https://codepen.io/GreenSock/pen/WNNNBpo\\n\\ngsap.set(\\\".flair\\\", {xPercent: -50, yPercent: -50});\\n\\nlet xTo = gsap.quickTo(\\\".flair\\\", \\\"x\\\", {duration: 0.6, ease: \\\"power3\\\"}),\\n yTo = gsap.quickTo(\\\".flair\\\", \\\"y\\\", {duration: 0.6, ease: \\\"power3\\\"});\\n\\nwindow.addEventListener(\\\"mousemove\\\", e => {\\n xTo(e.clientX);\\n yTo(e.clientY);\\n});\\n\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"b54a6d3c-0a02-4c52-aafa-3808ab2055d4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0a0f01ee-0c4b-4870-92e1-192a5237e104","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f355c344-6094-48dd-a3ab-a47066966d24","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --color-bg: #0d0f0f;\\n --color-text: #dcdcdc;\\n --color-border: rgba(255,255,255,0.1);\\n}\\n\\nbody {\\n margin: 0;\\n background: var(--color-bg);\\n color: var(--color-text);\\n font-family: sans-serif;\\n\\n display: flex;\\n align-items: center;\\n justify-content: stretch;\\n min-height: 100vh;\\n overflow: hidden;\\n}\\n\\nul {\\n width: 100%;\\n margin: 0;\\n padding: 0;\\n}\\n\\n.container {\\n list-style: none;\\n border-bottom: 1px solid var(--color-border);\\n width: 100%;\\n padding: 2rem;\\n font-size: 1.2rem;\\n cursor: pointer;\\n\\n transition: color 0.3s ease;\\n}\\n\\n.container:hover {\\n color: white;\\n}\\n\\n/* floating image */\\n.swipeimage {\\n position: fixed;\\n top: 0;\\n left: 0;\\n\\n width: 300px;\\n height: 300px;\\n object-fit: cover;\\n\\n transform: translate(-50%, -50%);\\n z-index: 999;\\n\\n opacity: 0;\\n visibility: hidden;\\n pointer-events: none;\\n\\n border-radius: 12px;\\n box-shadow: 0 20px 60px rgba(0,0,0,0.5);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n \\n\\n\\n

\\n restart reverse scrub pin markers overwrite modifiers\\n
\\n toggleActions start end once refresh from to\\n
\\n ScrollSmoother Flip Draggable SplitText InertiaPlugin\\n
\\n onComplete onUpdate quickSetter quickTo utils.toArray.\\n
\\n Power2 Power3 Power4 Back Elastic Bounce Expo Sine\\n

\\n\\n\\n\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const img = document.querySelector(\\\".swipeimage\\\");\\n\\ngsap.set(img, { xPercent: -50, yPercent: -50 });\\n\\nconst xTo = gsap.quickTo(img, \\\"x\\\", { duration: 0.4, ease: \\\"power3\\\" });\\nconst yTo = gsap.quickTo(img, \\\"y\\\", { duration: 0.4, ease: \\\"power3\\\" });\\n\\ndocument.querySelectorAll(\\\".container\\\").forEach((item) => {\\n\\n item.addEventListener(\\\"mouseenter\\\", () => {\\n const src = item.getAttribute(\\\"data-img\\\");\\n img.src = src;\\n\\n gsap.to(img, {\\n opacity: 1,\\n visibility: \\\"visible\\\",\\n duration: 0.3\\n });\\n });\\n\\n item.addEventListener(\\\"mouseleave\\\", () => {\\n gsap.to(img, {\\n opacity: 0,\\n duration: 0.3,\\n onComplete: () => {\\n img.style.visibility = \\\"hidden\\\";\\n }\\n });\\n });\\n\\n item.addEventListener(\\\"mousemove\\\", (e) => {\\n xTo(e.clientX);\\n yTo(e.clientY);\\n });\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"ee5b02f6-1cd5-4c24-84f0-b72e2da5ef75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"30677a98-6183-4611-9c6f-62f7a8854901","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"743fd3bf-b78b-43d7-b6ba-becb4650f6b5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]