feat(stage-ui): integrated animejs

packages/stage-ui/histoire.config.ts

@@ -19,7 +19,15 @@ export default defineConfig({
   vite: {
     base: '/ui/',
   },
-  setupFile: 'stories/setup.ts',
+  setupFile: {
+    browser: 'stories/setup.ts',
+    server: 'stories/setup.server.ts',
+  },
+  viteNodeTransformMode: {
+    web: [
+      /\.web\.vue$/,
+    ],
+  },
   tree: {
     groups: [
       {
@@ -46,6 +54,10 @@ export default defineConfig({
         id: 'misc',
         title: 'Misc',
       },
+      {
+        id: 'widgets',
+        title: 'Widgets',
+      },
       {
         id: 'physics',
         title: 'Physics',

packages/stage-ui/package.json

@@ -17,6 +17,7 @@
   "exports": {
     ".": "./src/components/index.ts",
     "./components": "./src/components/index.ts",
+    "./components/scenes/*": "./src/components/Scenes/index.ts",
     "./composables/*": "./src/composables/*.ts",
     "./composables": "./src/composables/index.ts",
     "./constants/*": "./src/constants/*.ts",
@@ -79,6 +80,7 @@
     "@xsai/shared-chat": "catalog:",
     "@xsai/stream-text": "catalog:",
     "@xsai/tool": "catalog:",
+    "animejs": "^4.0.2",
     "culori": "^4.0.2",
     "gpuu": "^1.0.4",
     "jszip": "^3.10.1",

packages/stage-ui/src/components/Widgets/PoppingSubtitles.story.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import PoppingSubtitles from './PoppingSubtitles.vue'
-</script>
-
-<template>
-  <Story
-    title="Popping Subtitles"
-    group="misc"
-    :layout="{ type: 'grid', width: '100%' }"
-  >
-    <Variant
-      id="default"
-      title="Default"
-    >
-      <PoppingSubtitles />
-    </Variant>
-  </Story>
-</template>

packages/stage-ui/src/components/Widgets/PoppingSubtitles.vue

@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>

packages/stage-ui/src/components/Widgets/PoppingSubtitles.web.story.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// import { ref } from 'vue'
+
+import PoppingSubtitles from './PoppingSubtitles.web.vue'
+
+// const sampleTexts = {
+//   english: 'Hello, world!',
+//   chinese: '你好，世界！',
+//   japanese: 'こんにちは、世界！',
+//   long: 'This is a longer sentence that might wrap to multiple lines and test our ellipsis functionality.',
+// }
+</script>
+
+<template>
+  <Story
+    title="Popping Subtitles"
+    group="widgets"
+    :layout="{ type: 'grid', width: '100%' }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant
+      id="basic-english"
+      title="English Text"
+    >
+      <div h-50 w-50 p-4>
+        <PoppingSubtitles />
+      </div>
+    </Variant>
+  </Story>
+</template>

packages/stage-ui/src/components/Widgets/PoppingSubtitles.web.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { animate, createDraggable, createSpring, utils } from 'animejs'
+import { onMounted } from 'vue'
+
+import Button from '../Misc/Button.vue'
+
+onMounted(() => {
+  const [$logo] = utils.$('.logo.js')
+  const [$button] = utils.$('button')
+  let rotations = 0
+
+  // Created a bounce animation loop
+  animate('.logo.js', {
+    scale: [
+      { to: 1.25, ease: 'inOut(3)', duration: 200 },
+      { to: 1, ease: createSpring({ stiffness: 300 }) },
+    ],
+    loop: true,
+    loopDelay: 250,
+  })
+
+  // Make the logo draggable around its center
+  createDraggable('.logo.js', {
+    container: [0, 0, 0, 0],
+    releaseEase: createSpring({ stiffness: 200 }),
+  })
+
+  // Animate logo rotation on click
+  function rotateLogo() {
+    rotations++
+
+    $button.textContent = `rotations: ${rotations}`
+
+    animate($logo, {
+      rotate: rotations * 360,
+      ease: 'out(4)',
+      duration: 1500,
+    })
+  }
+
+  $button.addEventListener('click', rotateLogo)
+})
+</script>
+
+<template>
+  <div class="large centered row mb-4">
+    <div class="logo js i-simple-icons:javascript" h-30 w-30 />
+  </div>
+  <div class="row medium">
+    <fieldset class="controls">
+      <Button>rotations: 0</Button>
+    </fieldset>
+  </div>
+</template>

packages/stage-ui/stories/setup.server.ts

@@ -0,0 +1,3 @@
+import './setup'
+
+globalThis.CSS = undefined as any

pnpm-lock.yaml

@@ -1096,6 +1096,9 @@ importers:
       '@xsai/tool':
         specifier: 'catalog:'
         version: 0.3.0-beta.6(zod-to-json-schema@3.24.6(zod@3.25.67))(zod@3.25.67)
+      animejs:
+        specifier: ^4.0.2
+        version: 4.0.2
       culori:
         specifier: ^4.0.2
         version: 4.0.2
@@ -5934,6 +5937,9 @@ packages:
   alien-signals@2.0.5:
     resolution: {integrity: sha512-PdJB6+06nUNAClInE3Dweq7/2xVAYM64vvvS1IHVHSJmgeOtEdrAGyp7Z2oJtYm0B342/Exd2NT0uMJaThcjLQ==}
 
+  animejs@4.0.2:
+    resolution: {integrity: sha512-f0L/kSya2RF23iMSF/VO01pMmLwlAFoiQeNAvBXhEyLzIPd2/QTBRatwGUqkVCC6seaAJYzAkGir55N4SL+h3A==}
+
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
 
@@ -17160,6 +17166,8 @@ snapshots:
 
   alien-signals@2.0.5: {}
 
+  animejs@4.0.2: {}
+
   ansi-align@3.0.1:
     dependencies:
       string-width: 4.2.3