From f8af56032ad4bb67af48083a69503e854052c08e Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Fri, 3 Jul 2026 23:51:29 +0800 Subject: [PATCH] chore(ui): remove legacy motion-css code (#583) Unused CSS motion experiment with known performance issues; no references remain. --- packages/ui/src/motion-css/createMotion.ts | 64 --- packages/ui/src/motion-css/motion.module.css | 395 ------------------- packages/ui/src/motion-css/readme | 5 - 3 files changed, 464 deletions(-) delete mode 100644 packages/ui/src/motion-css/createMotion.ts delete mode 100644 packages/ui/src/motion-css/motion.module.css delete mode 100644 packages/ui/src/motion-css/readme diff --git a/packages/ui/src/motion-css/createMotion.ts b/packages/ui/src/motion-css/createMotion.ts deleted file mode 100644 index 8c8fbbf..0000000 --- a/packages/ui/src/motion-css/createMotion.ts +++ /dev/null @@ -1,64 +0,0 @@ -import styles from './motion.module.css' - -export function createMotion() { - const wrapper = document.createElement('div') - wrapper.className = styles.wrapper - - { - const colorWrapper = document.createElement('div') - colorWrapper.className = styles.colorWrapper - wrapper.appendChild(colorWrapper) - - const layerA = document.createElement('div') - layerA.className = styles.colorLayer + ' ' + styles.layerA - colorWrapper.appendChild(layerA) - - const layerB = document.createElement('div') - layerB.className = styles.colorLayer + ' ' + styles.layerB - colorWrapper.appendChild(layerB) - - const layerC = document.createElement('div') - layerC.className = styles.colorLayer + ' ' + styles.layerC - colorWrapper.appendChild(layerC) - } - - { - const borderWrapper = document.createElement('div') - borderWrapper.className = styles.borderWrapper - wrapper.appendChild(borderWrapper) - - const layerA = document.createElement('div') - layerA.className = styles.borderLayer + ' ' + styles.layerA - borderWrapper.appendChild(layerA) - - const layerB = document.createElement('div') - layerB.className = styles.borderLayer + ' ' + styles.layerB - borderWrapper.appendChild(layerB) - - const layerC = document.createElement('div') - layerC.className = styles.borderLayer + ' ' + styles.layerC - borderWrapper.appendChild(layerC) - } - - function show() { - wrapper.classList.remove(styles.exit) - wrapper.classList.remove(styles.entry) - // Force reflow to restart animation - void wrapper.offsetHeight - wrapper.classList.add(styles.entry) - } - - function hide() { - wrapper.classList.remove(styles.entry) - wrapper.classList.remove(styles.exit) - // Force reflow to restart animation - void wrapper.offsetHeight - wrapper.classList.add(styles.exit) - } - - return { - element: wrapper, - show, - hide, - } -} diff --git a/packages/ui/src/motion-css/motion.module.css b/packages/ui/src/motion-css/motion.module.css deleted file mode 100644 index a93b49f..0000000 --- a/packages/ui/src/motion-css/motion.module.css +++ /dev/null @@ -1,395 +0,0 @@ -.wrapper { - position: absolute; - inset: 0; - pointer-events: none; - - transform-origin: center; - - --color-1: rgb(57, 182, 255); - --color-2: rgb(189, 69, 251); - --color-3: rgb(255, 87, 51); - --color-4: rgb(255, 214, 0); - - --blend-mode: screen; -} - -.colorLayer { - position: absolute; - inset: 0; - - /* 变亮混合模式 */ - /* mix-blend-mode: screen; */ - /* mix-blend-mode: overlay; */ - /* mix-blend-mode: multiply; */ - mix-blend-mode: add; - - /* 边框遮罩 - 中间透明，边缘不透明 */ - mask-image: url(https://page-agent.github.io/assets/ui/motion-mask.png); - mask-repeat: no-repeat; - mask-size: calc(100% + 10px) calc(100% + 10px); -} - -.borderWrapper { - position: absolute; - inset: 0; - - /* filter: blur(10px); */ -} - -.borderLayer { - position: absolute; - inset: 0; - - /* 变亮混合模式 */ - /* mix-blend-mode: overlay; */ - mix-blend-mode: add; - - mask-image: - linear-gradient( - to right, - black 0px, - black 2px, - transparent 2px, - transparent calc(100% - 2px), - black calc(100% - 2px), - black 100% - ), - linear-gradient( - to top, - black 0px, - black 2px, - transparent 2px, - transparent calc(100% - 2px), - black calc(100% - 2px), - black 100% - ); - - mask-composite: add; - mask-repeat: no-repeat; - mask-size: 100% 100%; - - /* filter: blur(100px); */ -} - -.blueLayer { - &.colorLayer { - mask-position: left -5px top -5px; - } - - &::after { - content: ''; - position: absolute; - /* inset: 0; */ - width: calc(max(100vw, 100vh) * 1.5); - height: 600px; - top: calc(50% - 300px); - left: 50%; - filter: blur(100px); - background: rgb(57, 182, 255); - animation: rotate-clockwise 4s linear infinite; - animation-delay: -3s; - } -} - -.purpleLayer { - &.colorLayer { - mask-position: left -3px top -7px; - } - - &::after { - content: ''; - position: absolute; - /* inset: 0; */ - width: calc(max(100vw, 100vh) * 1.5); - height: 600px; - top: calc(50% - 300px); - left: 50%; - filter: blur(100px); - background: rgb(189, 69, 251); - animation: rotate-clockwise 4s linear infinite; - animation-delay: -2s; - } -} - -.orangeLayer { - /* opacity: 0.5; */ - - &.colorLayer { - mask-position: left -7px top -2px; - } - - &::after { - content: ''; - position: absolute; - /* inset: 0; */ - width: calc(max(100vw, 100vh) * 1.5); - height: 600px; - top: calc(50% - 300px); - left: 50%; - filter: blur(100px); - background: rgb(255, 87, 51); - animation: rotate-counter-clockwise 3s linear infinite; - animation-delay: -2s; - } -} - -.yellowLayer { - /* opacity: 0.5; */ - - &.colorLayer { - mask-position: left -6px top -4px; - } - - &::after { - content: ''; - position: absolute; - /* inset: 0; */ - width: calc(max(100vw, 100vh) * 1.5); - height: 600px; - top: calc(50% - 300px); - left: 50%; - filter: blur(100px); - background: rgb(255, 214, 0); - animation: rotate-counter-clockwise 4s linear infinite; - animation-delay: -1s; - } -} - -/* 旋转动画 */ -@keyframes rotate-clockwise { - 0% { - transform: translateX(-50%) rotate(0deg); - } - 100% { - transform: translateX(-50%) rotate(360deg); - } -} - -@keyframes rotate-counter-clockwise { - 0% { - transform: translateX(-50%) rotate(0deg); - } - 100% { - transform: translateX(-50%) rotate(-360deg); - } -} - -@keyframes wrapper-entry { - from { - transform: scale(1.1); - } - to { - transform: scale(1); - } -} - -/* -rgb(57, 182, 255) -rgb(189, 69, 251) -rgb(255, 87, 51) -rgb(255, 214, 0) -*/ - -@keyframes mask-running { - from { - transform: translateX(0%); - } - to { - transform: translateX(100%); - } -} - -@keyframes mask-running-reverse { - from { - transform: translateX(100%); - } - to { - transform: translateX(0%); - } -} - -.colorWrapper { - position: absolute; - inset: 0; - - .colorLayer { - position: absolute; - inset: 0; - - mix-blend-mode: var(--blend-mode); - - /* 边框遮罩 - 中间透明，边缘不透明 */ - mask-image: url(https://page-agent.github.io/assets/ui/motion-mask.png); - mask-repeat: no-repeat; - mask-size: 100% 100%; - } -} - -.borderWrapper { - position: absolute; - inset: 0; - - --blend-mode: lighten; - - .borderLayer { - position: absolute; - inset: 0; - - mix-blend-mode: var(--blend-mode); - - mask-border: url(https://page-agent.github.io/assets/ui/motion-border.png) 25; - -webkit-mask-box-image: url(https://page-agent.github.io/assets/ui/motion-border.png) 25; - - mask-repeat: no-repeat; - mask-size: 100% 100%; - - background-color: var(--color-2); - } -} - -.entry .colorWrapper, -.entry .borderWrapper { - animation: wrapper-entry 0.8s ease-in-out forwards; -} - -.exit .colorWrapper, -.exit .borderWrapper { - animation: wrapper-entry 0.8s ease-in-out reverse forwards; -} - -.layerA { - position: absolute; - inset: 0; - - &::before { - mix-blend-mode: var(--blend-mode); - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - left: -100%; - top: 0; - background-image: linear-gradient( - to right bottom, - transparent, - var(--color-1), - transparent, - var(--color-1), - transparent - ); - animation: mask-running 2s linear infinite; - } - - &::after { - mix-blend-mode: var(--blend-mode); - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background-image: linear-gradient( - to right bottom, - transparent, - var(--color-1), - transparent, - var(--color-1), - transparent - ); - animation: mask-running 2s linear infinite; - } -} - -.layerB { - position: absolute; - inset: 0; - - &::before { - mix-blend-mode: var(--blend-mode); - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - left: -100%; - top: 0; - background: linear-gradient( - to right top, - transparent, - var(--color-2), - transparent, - var(--color-2), - transparent - ); - animation: mask-running-reverse 3s linear infinite; - } - - &::after { - mix-blend-mode: var(--blend-mode); - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background: linear-gradient( - to right top, - transparent, - var(--color-2), - transparent, - var(--color-2), - transparent - ); - animation: mask-running-reverse 3s linear infinite; - } -} - -.layerC { - position: absolute; - inset: 0; - - opacity: 0.5; - - &::before { - mix-blend-mode: var(--blend-mode); - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - left: -100%; - top: 0; - background: linear-gradient( - to right top, - transparent, - var(--color-3), - transparent, - var(--color-3), - transparent - ); - animation: mask-running 1s linear infinite; - } - - &::after { - mix-blend-mode: var(--blend-mode); - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background: linear-gradient( - to right top, - transparent, - var(--color-3), - transparent, - var(--color-3), - transparent - ); - animation: mask-running 1s linear infinite; - } -} diff --git a/packages/ui/src/motion-css/readme b/packages/ui/src/motion-css/readme deleted file mode 100644 index 8e019c2..0000000 --- a/packages/ui/src/motion-css/readme +++ /dev/null @@ -1,5 +0,0 @@ -This is the CSS implementation of ai-motion. - -Easy to use but Terrible performance. Causing full screen glitching in some browsers. - -Use it only in a small area.