winter-super-cli 2026.6.26 → 2026.6.28

package/resources/local/gsap-skills/examples/nuxt/app/composables/useGSAP.ts

@@ -0,0 +1,91 @@
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+const PLUGINS = [
+  "CSSRulePlugin",
+  "CustomBounce",
+  "CustomEase",
+  "CustomWiggle",
+  "Draggable",
+  "DrawSVGPlugin",
+  "EaselPlugin",
+  "EasePack",
+  "Flip",
+  "GSDevTools",
+  "InertiaPlugin",
+  "MorphSVGPlugin",
+  "MotionPathHelper",
+  "MotionPathPlugin",
+  "Observer",
+  "Physics2DPlugin",
+  "PhysicsPropsPlugin",
+  "PixiPlugin",
+  "ScrambleTextPlugin",
+  "ScrollSmoother",
+  "ScrollToPlugin",
+  "ScrollTrigger",
+  "SplitText",
+  "TextPlugin",
+] as const;
+
+type Plugins = typeof PLUGINS[number];
+
+// In order to dynamically load all the GSAP plugins 
+const pluginMap = {
+  CustomEase: () => import("gsap/CustomEase"),
+  Draggable: () => import("gsap/Draggable"),
+  CSSRulePlugin: () => import("gsap/CSSRulePlugin"),
+  EaselPlugin: () => import("gsap/EaselPlugin"),
+  EasePack: () => import("gsap/EasePack"),
+  Flip: () => import("gsap/Flip"),
+  MotionPathPlugin: () => import("gsap/MotionPathPlugin"),
+  Observer: () => import("gsap/Observer"),
+  PixiPlugin: () => import("gsap/PixiPlugin"),
+  ScrollToPlugin: () => import("gsap/ScrollToPlugin"),
+  ScrollTrigger: () => import("gsap/ScrollTrigger"),
+  TextPlugin: () => import("gsap/TextPlugin"),
+  DrawSVGPlugin: () => import("gsap/DrawSVGPlugin"),
+  Physics2DPlugin: () => import("gsap/Physics2DPlugin"),
+  PhysicsPropsPlugin: () => import("gsap/PhysicsPropsPlugin"),
+  ScrambleTextPlugin: () => import("gsap/ScrambleTextPlugin"),
+  CustomBounce: () => import("gsap/CustomBounce"),
+  CustomWiggle: () => import("gsap/CustomWiggle"),
+  GSDevTools: () => import("gsap/GSDevTools"),
+  InertiaPlugin: () => import("gsap/InertiaPlugin"),
+  MorphSVGPlugin: () => import("gsap/MorphSVGPlugin"),
+  MotionPathHelper: () => import("gsap/MotionPathHelper"),
+  ScrollSmoother: () => import("gsap/ScrollSmoother"),
+  SplitText: () => import("gsap/SplitText"),
+} as const;
+
+type PluginMap = typeof pluginMap;
+type Plugins = keyof PluginMap;
+
+// Resolves the module type for a given key, then picks the named export matching the key
+// this allows to have the type definitions for autocomplete in your code editor
+type PluginModule<K extends Plugins> = Awaited<ReturnType<PluginMap[K]>>;
+type PluginExport<K extends Plugins> = PluginModule<K>[K & keyof PluginModule<K>];
+
+export default function() {
+  // Register all the GSAP Plugins you want at this point
+  gsap.registerPlugin(ScrollTrigger);
+
+  /*
+    If you want to lazy load some of the plugins that are
+    not widely used in your app (for example in just a couple
+    of components or a single route), you can use this method
+  */
+  async function lazyLoadPlugin<K extends Plugins>(plugin: K): Promise<PluginExport<K>> {
+    const loader = pluginMap[plugin];
+    const m = await loader();
+    const p = (m as any)[plugin];
+    gsap.registerPlugin(p);
+    return p;
+  }
+
+  return {
+    gsap,
+    ScrollTrigger,
+    lazyLoadPlugin,
+  };
+};

package/resources/local/gsap-skills/examples/nuxt/app/pages/index.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+
+const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP();
+
+let ctx;
+onMounted(async () => {
+  const SplitText = await lazyLoadPlugin("SplitText");
+  
+  ctx = gsap.context(() => {
+    const split = SplitText.create("h1", {
+      type: "chars",
+    });
+    gsap.from(split.chars, {
+      autoAlpha: 0,
+      y: -50,
+      xPercent: -100,
+      rotation: -45,
+      ease: "power1.inOut",
+      stagger: {
+        amount: 0.3,
+      },
+    });
+
+    gsap.set("h1", { autoAlpha: 1 });
+  });
+});
+
+onMounted(() => {
+  ctx && ctx.revert();
+});
+</script>
+
+<template>
+  <main>
+    <h1>GSAP SplitText</h1>
+  </main>
+</template>
+
+<style scoped>
+  main {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 18px;
+  }
+
+  main h1 {
+    opacity: 0;
+    visibility: hidden;
+  }
+</style>

package/resources/local/gsap-skills/examples/nuxt/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  ssr: true,
+  compatibilityDate: '2025-07-15',
+});

package/resources/local/gsap-skills/examples/nuxt/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "gsap-nuxt-example",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "gsap": "^3.15.0",
+    "nuxt": "^4.4.2",
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.4"
+  }
+}

package/resources/local/gsap-skills/examples/react/App.jsx

@@ -0,0 +1,46 @@
+/**
+ * Minimal GSAP React example — follows gsap-react skill: useGSAP, scope, cleanup.
+ * No selector without scope; refs for targets; automatic revert on unmount.
+ */
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import { gsap } from "gsap";
+
+// Register useGSAP once (could be in main.jsx for app-level)
+gsap.registerPlugin(useGSAP);
+
+function App() {
+  const containerRef = useRef(null);
+  const boxRef = useRef(null);
+
+  useGSAP(
+    () => {
+      // Scoped to containerRef — selectors only match inside container
+      gsap.to(boxRef.current, { x: 100, duration: 0.6, ease: "power2" });
+      gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
+    },
+    { scope: containerRef }
+  );
+
+  return (
+    <div ref={containerRef} style={{ padding: "2rem" }}>
+      <h1>GSAP React — useGSAP + scope + cleanup</h1>
+      <div
+        ref={boxRef}
+        className="box"
+        style={{
+          width: 80,
+          height: 80,
+          background: "#0fa",
+          borderRadius: 8,
+          marginBottom: "1rem",
+        }}
+      />
+      <div className="item" style={{ margin: "0.5rem 0" }}>Item 1</div>
+      <div className="item" style={{ margin: "0.5rem 0" }}>Item 2</div>
+      <div className="item" style={{ margin: "0.5rem 0" }}>Item 3</div>
+    </div>
+  );
+}
+
+export default App;

package/resources/local/gsap-skills/examples/react/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>GSAP React — useGSAP + scope + cleanup</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/main.jsx"></script>
+</body>
+</html>

package/resources/local/gsap-skills/examples/react/main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/resources/local/gsap-skills/examples/react/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "gsap-skills-example-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@gsap/react": "^2.1.2",
+    "gsap": "^3.15.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^5.4.10"
+  }
+}

package/resources/local/gsap-skills/examples/react/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  root: ".",
+});

package/resources/local/gsap-skills/examples/vanilla/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>GSAP vanilla — canonical patterns</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 2rem; }
+    .box { width: 80px; height: 80px; background: #0fa; border-radius: 8px; margin: 1rem 0; }
+    .item { margin: 0.5rem 0; opacity: 0; }
+    .section { min-height: 120vh; padding: 2rem 0; }
+    .panel { width: 100px; height: 60px; background: #9cf; border-radius: 8px; }
+  </style>
+</head>
+<body>
+  <h1>GSAP vanilla — transforms, autoAlpha, timeline, ScrollTrigger</h1>
+
+  <h2>1. Single tween (transform + autoAlpha)</h2>
+  <div class="box" id="single" style="opacity: 0;"></div>
+
+  <h2>2. Timeline (sequencing)</h2>
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+
+  <h2>3. ScrollTrigger (timeline + scrub)</h2>
+  <section class="section" id="scroll-section">
+    <div class="panel">Panel</div>
+  </section>
+
+  <script type="module" src="main.js"></script>
+</body>
+</html>

package/resources/local/gsap-skills/examples/vanilla/main.js

@@ -0,0 +1,36 @@
+/**
+ * Minimal GSAP vanilla example — follows skills: transforms, autoAlpha, timeline, ScrollTrigger.
+ * Run from repo root: npx serve examples/vanilla (or open index.html with a local server that supports ES modules).
+ */
+import { gsap } from "https://cdn.jsdelivr.net/npm/gsap@3.15.0/index.js";
+import { ScrollTrigger } from "https://cdn.jsdelivr.net/npm/gsap@3.15.0/ScrollTrigger.js";
+
+gsap.registerPlugin(ScrollTrigger);
+
+// 1. Single tween — transform alias x, autoAlpha (opacity + visibility)
+gsap.to("#single", {
+  x: 120,
+  autoAlpha: 1,
+  duration: 0.6,
+  ease: "power2"
+});
+
+// 2. Timeline for sequencing (defaults, position parameter)
+const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2" } });
+tl.to(".a", { x: 100 })
+  .to(".b", { y: 40 }, "+=0.2")
+  .to(".c", { autoAlpha: 0 }, "-=0.1");
+
+// 3. ScrollTrigger on timeline (not on child tween)
+const tl2 = gsap.timeline({
+  scrollTrigger: {
+    trigger: "#scroll-section",
+    start: "top center",
+    end: "bottom center",
+    scrub: true
+  }
+});
+tl2.to(".panel", { x: 100 })
+  .to(".panel", { rotation: 5, duration: 0.7 });
+
+// After dynamic layout changes you would call: ScrollTrigger.refresh();

package/resources/local/gsap-skills/examples/vue/app.vue

@@ -0,0 +1,47 @@
+/**
+ * Minimal GSAP Vue 3 example — follows gsap-frameworks skill: gsap.context, scope, cleanup.
+ * Scoped selectors via context; automatic revert on unmount.
+ */
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { gsap } from "gsap";
+
+const container = ref(null);
+let ctx;
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+    // Simple tween — moves the box right and fades it in
+    gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2" });
+
+    // Stagger animation on .item elements (scoped to container)
+    gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
+
+    // ScrollTrigger timeline on the tall section
+    gsap.timeline({
+      scrollTrigger: { trigger: ".scroll-section", start: "top center", end: "bottom center", scrub: true },
+    }).to(".scroll-box", { x: 200, rotation: 360 });
+  }, container.value); // scope — all selectors resolve inside container
+});
+
+onUnmounted(() => {
+  ctx?.revert(); // cleanup: reverts all GSAP animations created in this context
+});
+</script>
+
+<template>
+  <div ref="container" :style="{ padding: '2rem' }">
+    <h1>GSAP Vue 3 — gsap.context + scope + cleanup</h1>
+
+    <div class="box" :style="{ width: '80px', height: '80px', background: '#0fa', borderRadius: '8px', marginBottom: '1rem', visibility: 'hidden' }" />
+
+    <div class="item" :style="{ margin: '0.5rem 0' }">Item 1</div>
+    <div class="item" :style="{ margin: '0.5rem 0' }">Item 2</div>
+    <div class="item" :style="{ margin: '0.5rem 0' }">Item 3</div>
+
+    <div class="scroll-section" :style="{ height: '150vh', marginTop: '2rem', background: '#f0f0f0', padding: '1rem' }">
+      <p>Scroll down to trigger the timeline</p>
+      <div class="scroll-box" :style="{ width: '60px', height: '60px', background: '#f0a', borderRadius: '8px', marginTop: '1rem' }" />
+    </div>
+  </div>
+</template>

package/resources/local/gsap-skills/examples/vue/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GSAP Vue 3 — gsap.context + scope + cleanup</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+
+</html>

package/resources/local/gsap-skills/examples/vue/main.js

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import App from "./App.vue";
+
+// Register all the GSAP Plugins you want only once at this top level file
+gsap.registerPlugin(ScrollTrigger);
+
+createApp(App).mount("#app");

package/resources/local/gsap-skills/examples/vue/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "gsap-vue-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "gsap": "^3.15.0",
+    "vue": "^3.5.32"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "vite": "^8.0.4"
+  }
+}

package/resources/local/gsap-skills/examples/vue/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+});