Ogl

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/<plugin>`).
+- **Pointer / Flip Card Stack**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Layout / Flip Grid**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Navigation / Floating Menu**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Canvas / Glass Slideshow**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Canvas / Globe**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Pointer / Image Trail**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Infinite Physics Gallery**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Logo Carousel**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Pointer / MacOS Dock**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Pointer / Magnetic**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Marquee**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Transition / Preloader**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Radial Gallery**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Slideshow**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Typography / Split Hover**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Typography / Split Reveal**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Typography / Stacking Words**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Typography / Text Loop**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Typography / Text Scramble**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Video Player**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Showcase / Video Slider**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Typography / Weight Wave**: Switched runtime GSAP imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+- **Helpers / GSAP**: Switched helper imports from `gsap/dist/*` to package entry points (`gsap`, `gsap/<plugin>`).
+
+### 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
 

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.
 

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"
 	}
 }

apps/web/src/lib/components/docs/ComponentPreview.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { onMount, tick } from "svelte";
-	import { Flip } from "gsap/dist/Flip";
-	import { gsap } from "gsap/dist/gsap";
+	import { Flip } from "gsap/Flip";
+	import { gsap } from "gsap";
 	import { cn } from "$lib/utils/cn";
 	import { getHighlighter } from "$lib/utils/highlighter";
 	import ScrollArea from "../ui/ScrollArea.svelte";
@@ -169,14 +169,14 @@
 
 <section
 	class={cn(
-		"inset-shadow relative w-full rounded-lg bg-background-inset p-1.5",
+		"relative w-full rounded-lg bg-background-inset p-1.5 inset-shadow",
 	)}
 	{...restProps}
 >
 	<div class="flex h-full flex-col rounded-md">
 		<div
 			bind:this={placeholderRef}
-			class="card relative flex min-h-96 flex-1 flex-col items-center justify-center rounded-md bg-background"
+			class="relative flex min-h-96 flex-1 flex-col items-center justify-center rounded-md bg-background card"
 		>
 			<div
 				bind:this={previewRef}
@@ -188,7 +188,7 @@
 			>
 				<button
 					onclick={reloadPreview}
-					class="inset-shadow absolute top-2 right-10 z-30 flex size-7 items-center justify-center rounded-sm bg-background-inset text-foreground transition-transform duration-150 ease-out active:scale-[0.95]"
+					class="absolute top-2 right-10 z-30 flex size-7 items-center justify-center rounded-sm bg-background-inset text-foreground inset-shadow transition-transform duration-150 ease-out active:scale-[0.95]"
 					aria-label="Reload Preview"
 				>
 					<svg
@@ -205,7 +205,7 @@
 				</button>
 				<button
 					onclick={toggleFullScreen}
-					class="inset-shadow absolute top-2 right-2 z-30 flex size-7 items-center justify-center rounded-sm bg-background-inset text-foreground transition-transform duration-150 ease-out active:scale-[0.95]"
+					class="absolute top-2 right-2 z-30 flex size-7 items-center justify-center rounded-sm bg-background-inset text-foreground inset-shadow transition-transform duration-150 ease-out active:scale-[0.95]"
 					aria-label={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"}
 				>
 					{#if isFullScreen}
@@ -248,7 +248,7 @@
 			</div>
 		</div>
 		<div
-			class="card mt-2 flex flex-1 flex-col overflow-hidden rounded-md rounded-b-md bg-background"
+			class="mt-2 flex flex-1 flex-col overflow-hidden rounded-md rounded-b-md bg-background card"
 		>
 			{#if tabs.length}
 				<div

apps/web/src/lib/components/home/Home.svelte

@@ -84,7 +84,7 @@
 		<p
 			class="max-w-xl text-center text-base font-normal tracking-normal text-pretty text-foreground-muted sm:text-lg"
 		>
-			Animated Svelte component library powered by GSAP and Three.js. Drop-in
+			Animated Svelte component library powered by GSAP and OGL. Drop-in
 			solutions for motion design, 3D canvases, and interactive animations.
 		</p>
 		<div data-reveal="actions" class="flex items-center gap-2">

apps/web/src/lib/config/site.ts

@@ -11,15 +11,15 @@ export const siteConfig = {
 	url: "https://motion-core.dev",
 	/** Default SEO description for the homepage and fallback metadata. */
 	description:
-		"Svelte-native motion toolkit with GSAP and Three.js powered components, demos, and CLI-driven workflows.",
+		"Svelte-native motion toolkit with GSAP and OGL-powered components, demos, and CLI-driven workflows.",
 	/** Author shown in metadata and structured data. */
 	author: "Marek Jóźwiak",
 	/** Primary SEO keywords for indexing and discovery. */
 	keywords: [
 		"motion core",
 		"svelte animation",
 		"gsap",
-		"three.js",
+		"ogl",
 		"component library",
 		"svelte components",
 		"motion toolkit",