Vanilla

[{"id":"5d335262-3f38-4898-9e54-981d7407029f","type":"heading","props":{"backgroundColor":"rgb(18, 15, 23)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Pixel Trail","styles":{"bold":true}}],"children":[]},{"id":"971b1158-7e92-4991-8adb-555e7ca26dcb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://www.reactbits.dev/animations/pixel-trail","content":[{"type":"text","text":"https://www.reactbits.dev/animations/pixel-trail","styles":{}}]}],"children":[]},{"id":"d27ae3c6-be91-4d2e-bf78-cff2a4e6e423","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"af104c3c-0da7-47aa-a715-c758e24fb2ae","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

\\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 main = document.querySelector(\\\"main\\\");\\n\\ngsap.set(\\\"main\\\", { perspective: 650 });\\n\\nconst outerRX = gsap.quickTo(\\\".logo-outer\\\", \\\"rotationX\\\", { ease: \\\"power3\\\" });\\nconst outerRY = gsap.quickTo(\\\".logo-outer\\\", \\\"rotationY\\\", { ease: \\\"power3\\\" });\\nconst innerX = gsap.quickTo(\\\".logo\\\", \\\"x\\\", { ease: \\\"power3\\\" });\\nconst innerY = gsap.quickTo(\\\".logo\\\", \\\"y\\\", { ease: \\\"power3\\\" });\\n\\nmain.addEventListener(\\\"pointermove\\\", (e) => {\\n outerRX(gsap.utils.interpolate(15, -15, e.y / window.innerHeight));\\n outerRY(gsap.utils.interpolate(-15, 15, e.x / window.innerWidth));\\n innerX(gsap.utils.interpolate(-30, 30, e.x / window.innerWidth));\\n innerY(gsap.utils.interpolate(-30, 30, e.y / window.innerHeight));\\n});\\n\\nmain.addEventListener(\\\"pointerleave\\\", (e) => {\\n outerRX(0);\\n outerRY(0);\\n innerX(0);\\n innerY(0);\\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":"e045f79e-52ca-460e-82b6-1f7fc0862d2d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0075e070-db47-4c08-89f4-d0d690119e3b","type":"heading","props":{"backgroundColor":"rgb(18, 15, 23)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Image Trail","styles":{"bold":true}}],"children":[]},{"id":"f54cf96a-cd5b-4259-b380-44a0145e5ace","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://www.reactbits.dev/animations/image-trail","content":[{"type":"text","text":"https://www.reactbits.dev/animations/image-trail","styles":{}}]}],"children":[]},{"id":"6256f21f-bb36-44b4-ab16-2b95ba057a9b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0c40db8b-9f67-4027-aa2c-72d493cb9b4d","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\".flair {\\n position: fixed;\\n opacity: 0;\\n width: 50px;\\n}\\n\\nbody {\\n height: 100vh;\\n overflow: hidden;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n min-height: 100vh;\\n}\\n\\n\\nh1 {\\n font-size: 8vw\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\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":"83771186-da63-45f9-baee-4bd76befd2d3","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":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Magnetic button","styles":{}}],"children":[]},{"id":"f55d9208-6136-4877-b80d-8ba6ec553d3d","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --color-surface-white: #ffffff;\\n --color-just-black: #000000;\\n --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);\\n}\\n\\nbody {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n min-height: 100vh;\\n background: #111;\\n font-family: sans-serif;\\n}\\n\\n.button {\\n align-items: center;\\n background: transparent;\\n border: none;\\n border-radius: 6.25rem;\\n color: var(--color-surface-white);\\n cursor: pointer;\\n display: inline-flex;\\n font-size: 1.2rem;\\n font-weight: 600;\\n gap: 0.36em;\\n justify-content: center;\\n letter-spacing: -0.01em;\\n line-height: 1.04;\\n overflow: hidden;\\n padding: 0.9rem 1.5rem;\\n position: relative;\\n text-decoration: none;\\n}\\n\\n.button--stroke::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border: 2px solid var(--color-surface-white);\\n border-radius: 6.25rem;\\n pointer-events: none;\\n}\\n\\n.button__label {\\n position: relative;\\n z-index: 2;\\n transition: color 0.2s var(--ease-in-out-quart);\\n}\\n\\n.button__flair {\\n position: absolute;\\n inset: 0;\\n pointer-events: none;\\n transform: scale(0);\\n transform-origin: 0 0;\\n}\\n\\n.button__flair::before {\\n content: \\\"\\\";\\n position: absolute;\\n width: 170%;\\n aspect-ratio: 1/1;\\n background: var(--color-surface-white);\\n border-radius: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.button:hover .button__label {\\n color: var(--color-just-black);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n GSAP Button\\n\\n \\n \\n\\n \\n \\n\\n \\n \\n \\n \\n \\n \\n Get GSAP\\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\":\"class Button {\\n constructor(buttonElement) {\\n this.block = buttonElement;\\n this.init();\\n this.initEvents();\\n }\\n\\n init() {\\n const el = gsap.utils.selector(this.block);\\n\\n this.DOM = {\\n button: this.block,\\n flair: el(\\\".button__flair\\\"),\\n };\\n\\n this.xSet = gsap.quickSetter(this.DOM.flair, \\\"xPercent\\\");\\n this.ySet = gsap.quickSetter(this.DOM.flair, \\\"yPercent\\\");\\n }\\n\\n getXY(e) {\\n const { left, top, width, height } =\\n this.DOM.button.getBoundingClientRect();\\n\\n const xTransformer = gsap.utils.pipe(\\n gsap.utils.mapRange(0, width, 0, 100),\\n gsap.utils.clamp(0, 100),\\n );\\n\\n const yTransformer = gsap.utils.pipe(\\n gsap.utils.mapRange(0, height, 0, 100),\\n gsap.utils.clamp(0, 100),\\n );\\n\\n return {\\n x: xTransformer(e.clientX - left),\\n y: yTransformer(e.clientY - top),\\n };\\n }\\n\\n initEvents() {\\n this.DOM.button.addEventListener(\\\"mouseenter\\\", (e) => {\\n const { x, y } = this.getXY(e);\\n\\n this.xSet(x);\\n this.ySet(y);\\n\\n gsap.to(this.DOM.flair, {\\n scale: 1,\\n duration: 0.4,\\n ease: \\\"power2.out\\\",\\n });\\n });\\n\\n this.DOM.button.addEventListener(\\\"mouseleave\\\", (e) => {\\n const { x, y } = this.getXY(e);\\n\\n gsap.killTweensOf(this.DOM.flair);\\n\\n gsap.to(this.DOM.flair, {\\n xPercent: x > 90 ? x + 20 : x < 10 ? x - 20 : x,\\n yPercent: y > 90 ? y + 20 : y < 10 ? y - 20 : y,\\n scale: 0,\\n duration: 0.3,\\n ease: \\\"power2.out\\\",\\n });\\n });\\n\\n this.DOM.button.addEventListener(\\\"mousemove\\\", (e) => {\\n const { x, y } = this.getXY(e);\\n\\n gsap.to(this.DOM.flair, {\\n xPercent: x,\\n yPercent: y,\\n duration: 0.4,\\n ease: \\\"power2\\\",\\n });\\n });\\n }\\n}\\n\\n// init all buttons\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", () => {\\n const buttons = document.querySelectorAll('[data-block=\\\"button\\\"]');\\n buttons.forEach((btn) => new Button(btn));\\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":"1fa022a7-a081-4d41-b1fd-6108b94586ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"51a2c26c-0f52-4313-9622-85f7d349a16a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Magnetic button text mask","styles":{}}],"children":[]},{"id":"4463b727-4fa2-4a47-9a98-f30d8424ae68","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --white: #ffffff;\\n --black: #000000;\\n --ease: cubic-bezier(0.76, 0, 0.24, 1);\\n}\\n\\nbody {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n min-height: 100vh;\\n background: #111;\\n font-family: sans-serif;\\n}\\n\\n.button {\\n position: relative;\\n overflow: hidden;\\n border-radius: 100px;\\n padding: 1rem 1.6rem;\\n color: var(--white);\\n text-decoration: none;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.button--stroke::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border: 2px solid var(--white);\\n border-radius: 100px;\\n}\\n\\n.button__text {\\n position: relative;\\n height: 1.2em;\\n overflow: hidden;\\n z-index: 2;\\n}\\n\\n.button__label {\\n display: block;\\n line-height: 1.2em;\\n}\\n\\n.button__label--first {\\n position: relative;\\n}\\n\\n.button__label--second {\\n position: absolute;\\n left: 0;\\n top: 0; /* 🔥 important */\\n}\\n\\n/* flair */\\n.button__flair {\\n position: absolute;\\n inset: 0;\\n transform: scale(0);\\n transform-origin: 0 0;\\n}\\n\\n.button__flair::before {\\n content: \\\"\\\";\\n position: absolute;\\n width: 170%;\\n aspect-ratio: 1/1;\\n background: var(--white);\\n border-radius: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.button:hover .button__label {\\n color: var(--black);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n GSAP Button\\n\\n \\n \\n\\n \\n \\n\\n \\n \\n \\n \\n \\n \\n\\n \\n Get GSAP\\n Get GSAP\\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\":\"class Button {\\n constructor(buttonElement) {\\n this.block = buttonElement;\\n this.init();\\n this.initEvents();\\n }\\n\\n init() {\\n const el = gsap.utils.selector(this.block);\\n\\n this.DOM = {\\n button: this.block,\\n flair: el(\\\".button__flair\\\"),\\n first: el(\\\".button__label--first\\\"),\\n second: el(\\\".button__label--second\\\"),\\n };\\n\\n this.xSet = gsap.quickSetter(this.DOM.flair, \\\"xPercent\\\");\\n this.ySet = gsap.quickSetter(this.DOM.flair, \\\"yPercent\\\");\\n\\n // initial state\\n gsap.set(this.DOM.second, {\\n yPercent: 120,\\n opacity: 0,\\n });\\n }\\n\\n getXY(e) {\\n const { left, top, width, height } =\\n this.DOM.button.getBoundingClientRect();\\n\\n return {\\n x: gsap.utils.clamp(0, 100, ((e.clientX - left) / width) * 100),\\n y: gsap.utils.clamp(0, 100, ((e.clientY - top) / height) * 100),\\n };\\n }\\n\\n initEvents() {\\n this.DOM.button.addEventListener(\\\"mouseenter\\\", (e) => {\\n const { x, y } = this.getXY(e);\\n\\n this.xSet(x);\\n this.ySet(y);\\n\\n // kill previous animations (IMPORTANT for smooth feel)\\n gsap.killTweensOf([this.DOM.first, this.DOM.second, this.DOM.flair]);\\n\\n // flair\\n gsap.to(this.DOM.flair, {\\n scale: 1,\\n duration: 0.7,\\n ease: \\\"expo.out\\\",\\n });\\n\\n // TEXT ANIMATION (smooth timeline)\\n gsap\\n .timeline()\\n .to(\\n this.DOM.first,\\n {\\n yPercent: -120,\\n opacity: 0,\\n duration: 0.8,\\n ease: \\\"expo.out\\\",\\n },\\n 0,\\n )\\n\\n .to(\\n this.DOM.second,\\n {\\n yPercent: 0,\\n opacity: 1,\\n duration: 0.8,\\n ease: \\\"expo.out\\\",\\n },\\n 0.05,\\n );\\n });\\n\\n this.DOM.button.addEventListener(\\\"mouseleave\\\", (e) => {\\n const { x, y } = this.getXY(e);\\n\\n gsap.killTweensOf([this.DOM.first, this.DOM.second, this.DOM.flair]);\\n\\n // flair\\n gsap.to(this.DOM.flair, {\\n xPercent: x,\\n yPercent: y,\\n scale: 0,\\n duration: 0.6,\\n ease: \\\"expo.out\\\",\\n });\\n\\n // REVERSE TEXT (smooth back)\\n gsap\\n .timeline()\\n .to(\\n this.DOM.first,\\n {\\n yPercent: 0,\\n opacity: 1,\\n duration: 1.2,\\n ease: \\\"expo.out\\\",\\n },\\n 0,\\n )\\n\\n .to(\\n this.DOM.second,\\n {\\n yPercent: 120,\\n opacity: 0,\\n duration: 1.2,\\n ease: \\\"expo.out\\\",\\n },\\n 0.05,\\n );\\n });\\n\\n this.DOM.button.addEventListener(\\\"mousemove\\\", (e) => {\\n const { x, y } = this.getXY(e);\\n\\n gsap.to(this.DOM.flair, {\\n xPercent: x,\\n yPercent: y,\\n duration: 0.5,\\n ease: \\\"power2.out\\\",\\n });\\n });\\n }\\n}\\n\\n// init\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", () => {\\n document\\n .querySelectorAll('[data-block=\\\"button\\\"]')\\n .forEach((btn) => new Button(btn));\\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":"6ad5a33f-a18f-445b-a2c3-b8c799a08ca7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1c8d97ec-45bd-4382-8bc5-ac15c6865203","type":"heading","props":{"backgroundColor":"rgb(18, 15, 23)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Shape Blur","styles":{"bold":true}}],"children":[]},{"id":"2b8df2b8-0906-4ba8-bc6e-1f930cb08b7d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://www.reactbits.dev/animations/shape-blur","content":[{"type":"text","text":"https://www.reactbits.dev/animations/shape-blur","styles":{}}]}],"children":[]},{"id":"b047f835-dbb3-41cb-a6a9-a7d7fbd48aa7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ec3a3a91-6d41-4ba9-bea8-49070b775ffb","type":"heading","props":{"backgroundColor":"rgb(18, 15, 23)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Meta Balls","styles":{"bold":true}}],"children":[]},{"id":"77491d76-41de-43ab-8e8c-850bbbfef513","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://www.reactbits.dev/animations/meta-balls","content":[{"type":"text","text":"https://www.reactbits.dev/animations/meta-balls","styles":{}}]}],"children":[]},{"id":"dd1b47ae-de2f-4c90-94d8-e057775c4aea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f3aa8692-c024-43fb-b36b-e1ae514130b2","type":"heading","props":{"backgroundColor":"rgb(18, 15, 23)","textColor":"rgb(255, 255, 255)","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Blob Cursor","styles":{"bold":true}}],"children":[]},{"id":"8d27e93e-cfb9-47c8-9202-165cca64009c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://www.reactbits.dev/animations/blob-cursor","content":[{"type":"text","text":"https://www.reactbits.dev/animations/blob-cursor","styles":{}}]}],"children":[]},{"id":"8a91389d-167a-410a-bf0d-41e9971cd82e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ec3f4dc8-01ea-4f75-95f9-d26b3109b2f3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]