diff --git a/CHANGELOG.md b/CHANGELOG.md index 9445e481..02c0c682 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,61 @@ and the project adheres to [Semantic Versioning](https://semver.org/). ## [Unreleased] +## [0.11.0] - 2026-04-16 + +### Changed + +- **Canvas / ASCII Renderer**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Card 3D**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Dithered Image**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Fake 3D Image**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Fluid Image Reveal**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Fluid Simulation**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Glass Pane**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Glass Slideshow**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Glitter Cloth**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Globe**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / God Rays**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Halo**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Infinite Gallery**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Interactive Grid**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Lava Lamp**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Neural Noise**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Pixelated Image**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Plasma Grid**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Rubiks Cube**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Specular Band**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Water Ripple**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Helpers**: Added shared `color` and `fluid-pointer` helpers for unified color conversion and pointer handling. +- **Canvas / Defaults**: Standardized default `backgroundColor` to `#17181A` and aligned default prop values across migrated OGL components. +- **Showcase / Card Stack**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Pointer / Flip Card Stack**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Layout / Flip Grid**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Navigation / Floating Menu**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Canvas / Glass Slideshow**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Canvas / Globe**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Pointer / Image Trail**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Infinite Physics Gallery**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Logo Carousel**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Pointer / MacOS Dock**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Pointer / Magnetic**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Marquee**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Transition / Preloader**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Radial Gallery**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Slideshow**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Typography / Split Hover**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Typography / Split Reveal**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Typography / Stacking Words**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Typography / Text Loop**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Typography / Text Scramble**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Video Player**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Showcase / Video Slider**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Typography / Weight Wave**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). +- **Helpers / GSAP**: Switched helper imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/`). + +### Removed + +- **Runtime / Dependencies**: Removed `three`, `@threlte/core`, `@threlte/extras`, and `@types/three` from `motion-core` package dependencies and switched to `ogl`. ## [0.10.0] - 2026-04-04 diff --git a/README.md b/README.md index 342276a7..62952155 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ We don't package everything into a massive npm dependency. Instead, we follow a ### Why Motion Core? - **Svelte 5 Native**: Leverages Runes and Snippets for a truly reactive and modern DX. -- **Performance First**: Heavy lifting is done by GSAP and Three.js, ensuring buttery smooth 60fps experiences. +- **Performance First**: Heavy lifting is done by GSAP and OGL, ensuring buttery smooth 60fps experiences. - **Aesthetic Focus**: From magnetic buttons to 3D infinite galleries with cloth distortion, every component is crafted with "feel" in mind. - **The "Un-Library"**: Use our CLI to scaffold components directly into your codebase. No black boxes. diff --git a/apps/web/package.json b/apps/web/package.json index 68b30c03..8db8e8d3 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -9,7 +9,6 @@ "@tailwindcss/vite": "^4.1.17", "@typescript-eslint/eslint-plugin": "^8.56.1", "@typescript-eslint/parser": "^8.56.1", - "@types/three": "^0.182.0", "eslint": "^10.0.2", "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.15.0", @@ -54,17 +53,15 @@ }, "type": "module", "dependencies": { - "@mediapipe/tasks-vision": "^0.10.22-rc.20250304", - "@threlte/core": "^8.3.1", - "@threlte/extras": "^9.7.1", "@fontsource/inter": "^5.2.8", + "@mediapipe/tasks-vision": "^0.10.22-rc.20250304", + "@takumi-rs/image-response": "1.0.0-rc.12", "carbon-icons-svelte": "^13.9.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "gsap": "^3.14.2", "motion-core": "workspace:*", - "tailwind-merge": "^3.5.0", - "three": "^0.182.0", - "@takumi-rs/image-response": "1.0.0-rc.12" + "ogl": "^1.0.11", + "tailwind-merge": "^3.5.0" } } diff --git a/apps/web/src/lib/components/docs/ComponentPreview.svelte b/apps/web/src/lib/components/docs/ComponentPreview.svelte index 9cfdd5dc..786cdcd6 100644 --- a/apps/web/src/lib/components/docs/ComponentPreview.svelte +++ b/apps/web/src/lib/components/docs/ComponentPreview.svelte @@ -1,8 +1,8 @@ @@ -49,6 +50,7 @@ import { AsciiRenderer } from "$lib/motion-core"; code: sceneSource, language: "svelte", }, + { name: "helpers/color.ts", code: colorHelperSource, language: "typescript" }, ]} > @@ -78,21 +80,21 @@ import { AsciiRenderer } from "$lib/motion-core"; { prop: "strength", type: "number", - default: "25.0", + default: "3.0", description: "Intensity of the ASCII character generation threshold.", }, { prop: "color", - type: "string", + type: 'string | number | [number, number, number] | { r: number; g: number; b: number }', default: '"#00ff00"', - description: "Color of the ASCII characters (hex string).", - }, - { - prop: "backgroundColor", - type: "string", - default: '"#000000"', - description: "Background color of the canvas (hex string).", + description: "Color of the ASCII characters.", }, + { + prop: "backgroundColor", + type: 'string | number | [number, number, number] | { r: number; g: number; b: number }', + default: '"#17181A"', + description: "Background color of the canvas.", + }, { prop: "class", type: "string", diff --git a/apps/web/src/routes/docs/ascii-renderer/AsciiRendererDemo.svelte b/apps/web/src/routes/docs/ascii-renderer/AsciiRendererDemo.svelte index 016b51fd..08918486 100644 --- a/apps/web/src/routes/docs/ascii-renderer/AsciiRendererDemo.svelte +++ b/apps/web/src/routes/docs/ascii-renderer/AsciiRendererDemo.svelte @@ -4,11 +4,4 @@ const demoImage = "/images/demos/sample-11.jpg"; - + diff --git a/apps/web/src/routes/docs/card-stack/+page.svx b/apps/web/src/routes/docs/card-stack/+page.svx index 08545744..e26f4080 100644 --- a/apps/web/src/routes/docs/card-stack/+page.svx +++ b/apps/web/src/routes/docs/card-stack/+page.svx @@ -11,7 +11,8 @@ description: A stack of cards that stick to the top and scale down as you scroll from "$lib/components/docs/markdown/Step.svelte"; import cardStackSource from "motion-core/components/card-stack/CardStack.svelte?raw"; import cardStackItemSource from - "motion-core/components/card-stack/CardStackItem.svelte?raw"; import + "motion-core/components/card-stack/CardStackItem.svelte?raw"; import gsapHelperSource + from "motion-core/helpers/gsap.ts?raw"; import CardStackDemo from "./CardStackDemo.svelte"; import cardStackDemoSource from "./CardStackDemo.svelte?raw"; @@ -42,13 +43,14 @@ import { CardStack, CardStackItem } from "motion-core"; sources={[ { name: "Example", code: cardStackDemoSource, language: "svelte" }, { name: "CardStack.svelte", code: cardStackSource, language: "svelte" }, - { - name: "CardStackItem.svelte", - code: cardStackItemSource, - language: "svelte", - }, - ]} -> + { + name: "CardStackItem.svelte", + code: cardStackItemSource, + language: "svelte", + }, + { name: "helpers/gsap.ts", code: gsapHelperSource, language: "typescript" }, + ]} + > @@ -116,13 +118,13 @@ import { CardStack, CardStackItem } from "motion-core"; { prop: "class", type: "string", - default: '""', + default: "undefined", description: "Additional CSS classes for the card.", }, { prop: "style", type: "string", - default: '""', + default: "undefined", description: "Additional inline styles.", }, ]} diff --git a/apps/web/src/routes/docs/changelog/registry/+page.svx b/apps/web/src/routes/docs/changelog/registry/+page.svx index 9f2c8f56..362cbe4c 100644 --- a/apps/web/src/routes/docs/changelog/registry/+page.svx +++ b/apps/web/src/routes/docs/changelog/registry/+page.svx @@ -5,6 +5,37 @@ description: All notable changes to Motion Core Component Registry. ## [Unreleased] +## [0.11.0] - 2026-04-16 + +### Changed + +- **Canvas / ASCII Renderer**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Card 3D**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Dithered Image**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Fake 3D Image**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Fluid Image Reveal**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Fluid Simulation**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Glass Pane**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Glass Slideshow**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Glitter Cloth**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Globe**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / God Rays**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Halo**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Infinite Gallery**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Interactive Grid**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Lava Lamp**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Neural Noise**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Pixelated Image**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Plasma Grid**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Rubiks Cube**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Specular Band**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Water Ripple**: Migrated rendering pipeline from Three.js/Threlte to OGL. +- **Canvas / Helpers**: Added shared `color` and `fluid-pointer` helpers for unified color conversion and pointer handling. +- **Canvas / Defaults**: Standardized default `backgroundColor` to `#17181A` and aligned default prop values across migrated OGL components. + +### Removed + +- **Runtime / Dependencies**: Removed `three`, `@threlte/core`, `@threlte/extras`, and `@types/three` from `motion-core` package dependencies and switched to `ogl`. ## [0.10.0] - 2026-04-04 diff --git a/apps/web/src/routes/docs/dithered-image/+page.svx b/apps/web/src/routes/docs/dithered-image/+page.svx index eb50f08b..0dedde17 100644 --- a/apps/web/src/routes/docs/dithered-image/+page.svx +++ b/apps/web/src/routes/docs/dithered-image/+page.svx @@ -12,6 +12,7 @@ description: An image display component that applies various ordered dithering a from "motion-core/components/dithered-image/DitheredImage.svelte?raw"; import SceneSource from "motion-core/components/dithered-image/DitheredImageScene.svelte?raw"; import + colorHelperSource from "motion-core/helpers/color.ts?raw"; import DitheredImageDemo from "./DitheredImageDemo.svelte"; import ditheredImageDemoSource from "./DitheredImageDemo.svelte?raw"; @@ -49,6 +50,7 @@ import { DitheredImage } from "$lib/motion-core"; code: SceneSource, language: "svelte", }, + { name: "helpers/color.ts", code: colorHelperSource, language: "typescript" }, ]} > @@ -83,16 +85,16 @@ import { DitheredImage } from "$lib/motion-core"; }, { prop: "color", - type: "string", + type: "string | number | [number, number, number] | { r: number; g: number; b: number }", default: '"#ff6900"', description: "The primary color of the dithered dots.", }, - { - prop: "backgroundColor", - type: "string", - default: '"#111113"', - description: "The background color of the dithered image.", - }, + { + prop: "backgroundColor", + type: "string | number | [number, number, number] | { r: number; g: number; b: number }", + default: '"#17181A"', + description: "The background color of the dithered image.", + }, { prop: "threshold", type: "number", diff --git a/apps/web/src/routes/docs/dithered-image/DitheredImageDemo.svelte b/apps/web/src/routes/docs/dithered-image/DitheredImageDemo.svelte index 6680de32..a7466945 100644 --- a/apps/web/src/routes/docs/dithered-image/DitheredImageDemo.svelte +++ b/apps/web/src/routes/docs/dithered-image/DitheredImageDemo.svelte @@ -4,9 +4,8 @@ diff --git a/apps/web/src/routes/docs/flip-grid/+page.svx b/apps/web/src/routes/docs/flip-grid/+page.svx index 34b82441..808bb2c6 100644 --- a/apps/web/src/routes/docs/flip-grid/+page.svx +++ b/apps/web/src/routes/docs/flip-grid/+page.svx @@ -11,7 +11,8 @@ description: A layout component that smoothly animates its children when the gri from "$lib/components/docs/markdown/Step.svelte"; import flipGridSource from "motion-core/components/flip-grid/FlipGrid.svelte?raw"; import flipGridItemSource from - "motion-core/components/flip-grid/FlipGridItem.svelte?raw"; import + "motion-core/components/flip-grid/FlipGridItem.svelte?raw"; import gsapHelperSource + from "motion-core/helpers/gsap.ts?raw"; import FlipGridDemo from "./FlipGridDemo.svelte"; import flipGridDemoSource from "./FlipGridDemo.svelte?raw"; @@ -44,12 +45,13 @@ import { FlipGrid, FlipGridItem } from "$lib/motion-core"; code: flipGridSource, language: "svelte", }, - { - name: "FlipGridItem.svelte", - code: flipGridItemSource, - language: "svelte", - }, - ]} + { + name: "FlipGridItem.svelte", + code: flipGridItemSource, + language: "svelte", + }, + { name: "helpers/gsap.ts", code: gsapHelperSource, language: "typescript" }, + ]} > @@ -78,14 +80,14 @@ import { FlipGrid, FlipGridItem } from "$lib/motion-core"; { prop: "class", type: "string", - default: '""', + default: "undefined", description: "The CSS class for the grid container. Changes to this trigger the animation.", }, { prop: "style", type: "string", - default: '""', + default: "undefined", description: "Additional inline styles.", }, { @@ -131,7 +133,7 @@ import { FlipGrid, FlipGridItem } from "$lib/motion-core"; { prop: "class", type: "string", - default: '""', + default: "undefined", description: "CSS classes for the item.", }, ]} diff --git a/apps/web/src/routes/docs/floating-menu/+page.svx b/apps/web/src/routes/docs/floating-menu/+page.svx index 0ca787f9..ba1ea20a 100644 --- a/apps/web/src/routes/docs/floating-menu/+page.svx +++ b/apps/web/src/routes/docs/floating-menu/+page.svx @@ -10,6 +10,7 @@ description: A floating interaction menu with a GSAP timeline animation, featuri import Steps from "$lib/components/docs/markdown/Steps.svelte"; import Step from "$lib/components/docs/markdown/Step.svelte"; import floatingMenuSource from "motion-core/components/floating-menu/FloatingMenu.svelte?raw"; import + gsapHelperSource from "motion-core/helpers/gsap.ts?raw"; import FloatingMenuDemo from "./FloatingMenuDemo.svelte"; import floatingMenuDemoSource from "./FloatingMenuDemo.svelte?raw"; @@ -37,12 +38,13 @@ import { FloatingMenu } from "$lib/motion-core"; @@ -58,7 +60,7 @@ import { FloatingMenu } from "$lib/motion-core"; { prop: "menuGroups", type: "MenuGroup[]", - default: "[]", + default: "—", description: "Groups of links to display in the expanded menu.", }, { @@ -79,26 +81,26 @@ import { FloatingMenu } from "$lib/motion-core"; default: "undefined", description: "Configuration for the secondary button.", }, - { - prop: "portalTarget", - type: "HTMLElement | string", - default: '"body"', - description: "Target element to render the menu into.", - }, - { - prop: "class", - type: "string", - default: '""', - description: "Additional CSS classes for the container.", - }, - { - prop: "classes", - type: "FloatingMenuClasses", - default: "{}", - description: - "Optional class overrides for internal slots (buttons, groups, links, etc.).", - }, - ]} + { + prop: "portalTarget", + type: "HTMLElement | string", + default: '"body"', + description: "Target element to render the menu into.", + }, + { + prop: "class", + type: "string", + default: "undefined", + description: "Additional CSS classes for the container.", + }, + { + prop: "classes", + type: "FloatingMenuClasses", + default: "undefined", + description: + "Optional class overrides for internal slots (buttons, groups, links, etc.).", + }, + ]} /> ### FloatingMenuClasses @@ -155,13 +157,13 @@ type FloatingMenuClasses = Partial<{ { key: "variant", type: '"default" | "muted"', - default: '"default"', + default: "undefined", description: "Visual style of the group container.", }, { key: "links", type: "MenuLink[]", - default: "[]", + default: "—", description: "Array of links within this group.", }, ]} diff --git a/apps/web/src/routes/docs/fluid-image-reveal/FluidImageRevealDemo.svelte b/apps/web/src/routes/docs/fluid-image-reveal/FluidImageRevealDemo.svelte index 8d284c45..73f68261 100644 --- a/apps/web/src/routes/docs/fluid-image-reveal/FluidImageRevealDemo.svelte +++ b/apps/web/src/routes/docs/fluid-image-reveal/FluidImageRevealDemo.svelte @@ -5,11 +5,4 @@ const revealImage = "/images/demos/day.png"; - + diff --git a/apps/web/src/routes/docs/fluid-simulation/+page.svx b/apps/web/src/routes/docs/fluid-simulation/+page.svx index 80a2fd25..569278aa 100644 --- a/apps/web/src/routes/docs/fluid-simulation/+page.svx +++ b/apps/web/src/routes/docs/fluid-simulation/+page.svx @@ -12,6 +12,7 @@ description: A physics-based fluid simulation with pointer interaction. from "motion-core/components/fluid-simulation/FluidSimulation.svelte?raw"; import sceneSource from "motion-core/components/fluid-simulation/FluidSimulationScene.svelte?raw"; + import colorHelperSource from "motion-core/helpers/color.ts?raw"; import FluidSimulationDemo from "./FluidSimulationDemo.svelte"; import fluidSimulationDemoSource from "./FluidSimulationDemo.svelte?raw"; @@ -49,6 +50,7 @@ import { FluidSimulation } from "$lib/motion-core"; code: sceneSource, language: "svelte", }, + { name: "helpers/color.ts", code: colorHelperSource, language: "typescript" }, ]} > @@ -77,10 +79,10 @@ import { FluidSimulation } from "$lib/motion-core"; }, { prop: "color", - type: "THREE.ColorRepresentation", + type: "string | number | [number, number, number] | { r: number; g: number; b: number }", default: '"#ff6900"', description: - "Color of the fluid splat. Accepts any valid Three.js color representation.", + "Color of the fluid splat. Accepts string, number, RGB tuple, or { r, g, b } object.", }, { prop: "velocityDissipation", diff --git a/apps/web/src/routes/docs/glitter-cloth/+page.svx b/apps/web/src/routes/docs/glitter-cloth/+page.svx index 27de222b..6606252f 100644 --- a/apps/web/src/routes/docs/glitter-cloth/+page.svx +++ b/apps/web/src/routes/docs/glitter-cloth/+page.svx @@ -12,6 +12,7 @@ description: Animated silk-like cloth shader with fine glitter noise and subtle from "motion-core/components/glitter-cloth/GlitterCloth.svelte?raw"; import sceneSource from "motion-core/components/glitter-cloth/GlitterClothScene.svelte?raw"; import + colorHelperSource from "motion-core/helpers/color.ts?raw"; import GlitterClothDemo from "./GlitterClothDemo.svelte"; import glitterClothDemoSource from "./GlitterClothDemo.svelte?raw"; @@ -45,6 +46,7 @@ import { GlitterCloth } from "$lib/motion-core"; language: "svelte", }, { name: "GlitterClothScene.svelte", code: sceneSource, language: "svelte" }, + { name: "helpers/color.ts", code: colorHelperSource, language: "typescript" }, ]} > @@ -60,7 +62,7 @@ import { GlitterCloth } from "$lib/motion-core"; data={[ { prop: "color", - type: "THREE.ColorRepresentation", + type: "string | number | [number, number, number] | { r: number; g: number; b: number }", default: '"#FF6900"', description: "Primary color used for the shader palette. Accent and shadow tones are derived automatically.", diff --git a/apps/web/src/routes/docs/glitter-cloth/GlitterClothDemo.svelte b/apps/web/src/routes/docs/glitter-cloth/GlitterClothDemo.svelte index 21cd58ab..092500f3 100644 --- a/apps/web/src/routes/docs/glitter-cloth/GlitterClothDemo.svelte +++ b/apps/web/src/routes/docs/glitter-cloth/GlitterClothDemo.svelte @@ -4,6 +4,7 @@ diff --git a/apps/web/src/routes/docs/globe/+page.svx b/apps/web/src/routes/docs/globe/+page.svx index 1dfd80d8..ab4e1f04 100644 --- a/apps/web/src/routes/docs/globe/+page.svx +++ b/apps/web/src/routes/docs/globe/+page.svx @@ -13,8 +13,9 @@ description: A Fresnel-lit globe with rim glow, haloed atmosphere, land mesh det "motion-core/components/globe/GlobeScene.svelte?raw"; import globeMarkerItemSource from "motion-core/components/globe/GlobeMarkerItem.svelte?raw"; import typesSource - from "motion-core/components/globe/types.ts?raw"; import GlobeDemo from - "./GlobeDemo.svelte"; import globeDemoSource from "./GlobeDemo.svelte?raw"; + from "motion-core/components/globe/types.ts?raw"; import colorHelperSource from + "motion-core/helpers/color.ts?raw"; import GlobeDemo from "./GlobeDemo.svelte"; + import globeDemoSource from "./GlobeDemo.svelte?raw"; ## Installation @@ -48,6 +49,7 @@ import { Globe } from "$lib/motion-core"; language: "svelte", }, { name: "types.ts", code: typesSource, language: "typescript" }, + { name: "helpers/color.ts", code: colorHelperSource, language: "typescript" }, ]} > @@ -87,7 +89,7 @@ import { Globe } from "$lib/motion-core"; }, { prop: "landPointColor", - type: "THREE.ColorRepresentation", + type: "string | number | readonly [number, number, number] | { r: number; g: number; b: number }", default: '"#f77114"', description: "Color of the dots representing land.", }, @@ -172,13 +174,13 @@ import { Globe } from "$lib/motion-core"; data={[ { key: "color", - type: "THREE.ColorRepresentation", - default: '"#111113"', + type: "string | number | readonly [number, number, number] | { r: number; g: number; b: number }", + default: '"#17181A"', description: "Base color before the rim glow is applied.", }, { key: "rimColor", - type: "THREE.ColorRepresentation", + type: "string | number | readonly [number, number, number] | { r: number; g: number; b: number }", default: '"#FF6900"', description: "Color tint used for the Fresnel rim.", }, @@ -205,7 +207,7 @@ import { Globe } from "$lib/motion-core"; data={[ { key: "color", - type: "THREE.ColorRepresentation", + type: "string | number | readonly [number, number, number] | { r: number; g: number; b: number }", default: '"#FF6900"', description: "Color of the atmosphere glow.", }, @@ -232,7 +234,7 @@ import { Globe } from "$lib/motion-core"; { key: "intensity", type: "number", - default: "2.0", + default: "1.1", description: "Global intensity multiplier for the glow.", }, ]} diff --git a/apps/web/src/routes/docs/globe/GlobeDemo.svelte b/apps/web/src/routes/docs/globe/GlobeDemo.svelte index 4db9167c..63ae4473 100644 --- a/apps/web/src/routes/docs/globe/GlobeDemo.svelte +++ b/apps/web/src/routes/docs/globe/GlobeDemo.svelte @@ -42,24 +42,22 @@ {/snippet}