chore: streamline formatting and pre-commit checks

.githooks/pre-commit

@@ -9,5 +9,5 @@ if ! command -v pnpm >/dev/null 2>&1; then
 	exit 1
 fi
 
-echo "pre-commit: running the full CI gate"
-pnpm run ci
+echo "pre-commit: checking changelog, formatting, and lint"
+pnpm run precommit

.oxfmtrc.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "./node_modules/oxfmt/configuration_schema.json",
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"sortPackageJson": false,
+	"sortTailwindcss": {
+		"stylesheet": "./apps/web/src/routes/layout.css"
+	},
+	"svelte": {},
+	"ignorePatterns": [
+		"package-lock.json",
+		"pnpm-lock.yaml",
+		"yarn.lock",
+		"bun.lock",
+		"bun.lockb",
+		"/static/",
+		"**/.svelte-kit/",
+		"**/dist/",
+		"packages/motion-gpu/benchmarks/results/",
+		"packages/motion-gpu/coverage/",
+		"packages/motion-gpu/test-results/"
+	]
+}

apps/web/package.json

@@ -22,8 +22,7 @@
 		"github-slugger": "^2.0.0",
 		"globals": "^17.11.0",
 		"mdsvex": "^0.12.6",
-		"prettier": "catalog:",
-		"prettier-plugin-svelte": "^3.5.2",
+		"oxfmt": "catalog:",
 		"rehype-pretty-code": "^0.14.1",
 		"rehype-slug": "^6.0.0",
 		"shiki": "^4.0.1",
@@ -55,8 +54,8 @@
 		"test:watch": "vitest",
 		"lint": "eslint . && pnpm run lint:config",
 		"lint:config": "node --test ../../scripts/eslint/shared-preset.test.mjs ./scripts/lint/config-coverage.test.mjs && node ./scripts/lint/config-coverage.mjs",
-		"format": "prettier --write .",
-		"format:check": "prettier --check ."
+		"format": "oxfmt",
+		"format:check": "oxfmt --check"
 	},
 	"type": "module",
 	"dependencies": {

apps/web/src/routes/+layout.svelte

@@ -99,7 +99,7 @@
 		<meta name="twitter:title" content={homeTitle} />
 		<meta name="twitter:description" content={homeDescription} />
 		<meta name="twitter:image" content={sharedOgImage} />
-		<svelte:element this={'script'} type="application/ld+json">
+		<svelte:element this={"script"} type="application/ld+json">
 			{homeStructuredData}
 		</svelte:element>
 	{:else if !currentSection}

apps/web/src/routes/[section]/+layout.svelte

@@ -177,12 +177,12 @@
 		<meta name="twitter:description" content={docDescription} />
 		<meta name="twitter:image" content={docOgImage} />
 		{#if docStructuredData}
-			<svelte:element this={'script'} type="application/ld+json">
+			<svelte:element this={"script"} type="application/ld+json">
 				{docStructuredData}
 			</svelte:element>
 		{/if}
 		{#if breadcrumbStructuredData}
-			<svelte:element this={'script'} type="application/ld+json">
+			<svelte:element this={"script"} type="application/ld+json">
 				{breadcrumbStructuredData}
 			</svelte:element>
 		{/if}

package.json

@@ -43,20 +43,18 @@
 		"lint": "pnpm run lint:motion-gpu && pnpm run lint:web",
 		"lint:web": "pnpm --dir apps/web run lint",
 		"lint:motion-gpu": "pnpm --dir packages/motion-gpu run lint",
-		"format": "pnpm --dir apps/web run format && pnpm --dir packages/motion-gpu run format",
-		"format:check:root": "pnpm exec prettier --check package.json CONTRIBUTING.md scripts .github",
-		"format:check": "pnpm run format:check:root && pnpm --dir apps/web run format:check && pnpm --dir packages/motion-gpu exec prettier --check .",
+		"format": "pnpm run format:root && pnpm --dir apps/web run format && pnpm --dir packages/motion-gpu run format",
+		"format:root": "oxfmt .oxfmtrc.json pnpm-workspace.yaml package.json CONTRIBUTING.md scripts .github .githooks",
+		"format:check:root": "oxfmt --check .oxfmtrc.json pnpm-workspace.yaml package.json CONTRIBUTING.md scripts .github .githooks",
+		"format:check": "pnpm run format:check:root && pnpm --dir apps/web run format:check && pnpm --dir packages/motion-gpu run format:check",
+		"precommit": "pnpm run docs:changelog:check && pnpm run format:check && pnpm run lint",
 		"ci:quality": "pnpm run docs:changelog:check && pnpm run format:check && pnpm run lint && pnpm run build && pnpm run check:motion-gpu && pnpm run check:motion-gpu:consumers && pnpm run check:motion-gpu:consumers:peers && pnpm run check:web && pnpm run test:motion-gpu:coverage && pnpm run test:motion-gpu:perf-tools && pnpm --dir apps/web test --passWithNoTests",
 		"ci:e2e": "pnpm --dir packages/motion-gpu run test:e2e",
 		"ci": "pnpm run ci:quality && pnpm run ci:e2e",
 		"prepare": "node ./scripts/setup-git-hooks.mjs"
 	},
-	"dependencies": {
-		"prettier-plugin-tailwindcss": "catalog:"
-	},
 	"devDependencies": {
-		"prettier": "catalog:",
-		"prettier-plugin-svelte": "^3.5.2"
+		"oxfmt": "catalog:"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [

packages/motion-gpu/package.json

@@ -111,11 +111,12 @@
 		"perf:renderer": "tsx ./scripts/perf/real-renderer-benchmark.ts",
 		"perf:renderer:baseline": "tsx ./scripts/perf/real-renderer-benchmark.ts --update-baseline",
 		"perf:renderer:headed": "tsx ./scripts/perf/real-renderer-benchmark.ts --headed",
-		"lint": "prettier --check . && pnpm run lint:oxlint && eslint . --max-warnings 0 && pnpm run lint:config && pnpm run lint:imports",
+		"lint": "pnpm run lint:oxlint && eslint . --max-warnings 0 && pnpm run lint:config && pnpm run lint:imports",
 		"lint:config": "node --test ./scripts/lint/config-coverage.test.mjs && node ./scripts/lint/config-coverage.mjs",
 		"lint:imports": "node --test ./scripts/lint/import-boundaries.test.mjs && node ./scripts/lint/import-boundaries.mjs",
 		"lint:oxlint": "oxlint --deny-warnings src/lib && oxlint --type-aware -A all -D typescript/await-thenable -D typescript/no-floating-promises -D typescript/no-misused-promises --deny-warnings src/lib && node --test ./scripts/lint/oxlint-equivalence.test.mjs && node ./scripts/lint/oxlint-equivalence.mjs",
-		"format": "prettier --write ."
+		"format": "oxfmt",
+		"format:check": "oxfmt --check"
 	},
 	"peerDependencies": {
 		"react": "^19.0.0",
@@ -163,9 +164,7 @@
 		"happy-dom": "^20.11.2",
 		"oxlint": "^1.78.0",
 		"oxlint-tsgolint": "^7.0.2001",
-		"prettier": "catalog:",
-		"prettier-plugin-svelte": "^3.5.2",
-		"prettier-plugin-tailwindcss": "catalog:",
+		"oxfmt": "catalog:",
 		"publint": "^0.3.23",
 		"react": "^19.2.8",
 		"react-dom": "^19.2.8",

packages/motion-gpu/src/lib/core/frame-registry.ts

@@ -75,7 +75,8 @@ export interface UseFrameOptions {
  * Invalidation token value or resolver.
  */
 export type FrameTaskInvalidationToken =
-	FrameInvalidationToken | (() => FrameInvalidationToken | null | undefined);
+	| FrameInvalidationToken
+	| (() => FrameInvalidationToken | null | undefined);
 
 /**
  * Explicit task invalidation policy.

packages/motion-gpu/src/lib/core/types.ts

@@ -398,7 +398,9 @@ export interface ComputeExternalSamplerReference {
 
 /** Material texture key or a borrowed WebGPU texture/view reference. */
 export type ComputeTextureReference =
-	string | ComputeExternalTextureReference | ComputeExternalTextureViewReference;
+	| string
+	| ComputeExternalTextureReference
+	| ComputeExternalTextureViewReference;
 
 /** Material storage-buffer key or a borrowed WebGPU buffer reference. */
 export type ComputeBufferReference = string | ComputeExternalBufferReference;
@@ -477,7 +479,11 @@ export type OutputEncoding = 'srgb' | 'linear';
  * Final tone mapper applied by the private presentation pass.
  */
 export type ToneMapping =
-	'none' | 'khronos-pbr-neutral' | 'uncharted2-filmic' | 'aces-hill' | 'gran-turismo';
+	| 'none'
+	| 'khronos-pbr-neutral'
+	| 'uncharted2-filmic'
+	| 'aces-hill'
+	| 'gran-turismo';
 
 /**
  * Requested display dynamic range for final canvas presentation.

packages/motion-gpu/src/tests/FragCanvas.runtime.test.ts

@@ -738,7 +738,8 @@ describe('FragCanvas runtime', () => {
 		});
 
 		const firstRenderInput = created[0]?.render.mock.calls[0]?.[0] as
-			{ uniforms: Record<string, unknown>; textures: Record<string, unknown> } | undefined;
+			| { uniforms: Record<string, unknown>; textures: Record<string, unknown> }
+			| undefined;
 		expect(firstRenderInput?.uniforms['uGain']).toBe(0.75);
 		expect(firstRenderInput?.textures['uTex']).toBeTruthy();
 
@@ -757,7 +758,8 @@ describe('FragCanvas runtime', () => {
 		});
 
 		const secondRenderInput = created[1]?.render.mock.calls[0]?.[0] as
-			{ uniforms: Record<string, unknown>; textures: Record<string, unknown> } | undefined;
+			| { uniforms: Record<string, unknown>; textures: Record<string, unknown> }
+			| undefined;
 		expect('uGain' in (secondRenderInput?.uniforms ?? {})).toBe(false);
 		expect('uTex' in (secondRenderInput?.textures ?? {})).toBe(false);
 	});
@@ -844,7 +846,8 @@ describe('FragCanvas runtime', () => {
 		await flushFrame(32);
 		await waitFor(() => {
 			const latest = onErrorHistory.mock.calls[onErrorHistory.mock.calls.length - 1]?.[0] as
-				Array<{ rawMessage: string }> | undefined;
+				| Array<{ rawMessage: string }>
+				| undefined;
 			expect(latest).toHaveLength(1);
 			expect(latest?.[0]?.rawMessage).toContain('Unknown uniform "uMissing"');
 		});
@@ -859,7 +862,8 @@ describe('FragCanvas runtime', () => {
 		await flushFrame(48);
 		await waitFor(() => {
 			const latest = onErrorHistory.mock.calls[onErrorHistory.mock.calls.length - 1]?.[0] as
-				Array<{ rawMessage: string }> | undefined;
+				| Array<{ rawMessage: string }>
+				| undefined;
 			expect(latest).toHaveLength(2);
 			expect(latest?.[0]?.rawMessage).toContain('Unknown uniform "uMissing"');
 			expect(latest?.[1]?.rawMessage).toContain('Unknown texture "uMissing"');
@@ -875,7 +879,8 @@ describe('FragCanvas runtime', () => {
 		await flushFrame(64);
 		await waitFor(() => {
 			const latest = onErrorHistory.mock.calls[onErrorHistory.mock.calls.length - 1]?.[0] as
-				Array<{ rawMessage: string }> | undefined;
+				| Array<{ rawMessage: string }>
+				| undefined;
 			expect(latest).toHaveLength(2);
 			expect(latest?.[0]?.rawMessage).toContain('Unknown texture "uMissing"');
 			expect(latest?.[1]?.rawMessage).toContain('Unknown uniform "uMissing"');

packages/motion-gpu/src/tests/core/compute-comprehensive.test.ts

@@ -895,7 +895,8 @@ fn compute(@builtin(global_invocation_id) id: vec3u) {
 				input.entries.length === 2 &&
 				input.entries.every((entry) => {
 					const resource = entry.resource as
-						{ textureDescriptor?: GPUTextureDescriptor } | undefined;
+						| { textureDescriptor?: GPUTextureDescriptor }
+						| undefined;
 					return Boolean(
 						resource && typeof resource === 'object' && 'textureDescriptor' in resource
 					);

packages/motion-gpu/src/tests/core/passes.test.ts

@@ -155,7 +155,8 @@ fn shade(inputColor: vec4f, uv: vec2f) -> vec4f {
 		pass.render(context);
 
 		const descriptor = device.createShaderModule.mock.calls[0]?.[0] as
-			GPUShaderModuleDescriptor | undefined;
+			| GPUShaderModuleDescriptor
+			| undefined;
 		const source = String(descriptor?.code ?? '');
 		expect(source).toContain('var<private> motiongpuFragment: MotionGPUFragment;');
 		expect(source).toContain('return motiongpuFragment.uv;');

packages/motion-gpu/src/tests/core/renderer.test.ts

@@ -1145,7 +1145,8 @@ describe('createRenderer', () => {
 		});
 		const viewB = textureB?.createView.mock.results[0]?.value as GPUTextureView | undefined;
 		const latestBindGroup = runtime.device.createBindGroup.mock.calls.at(-1)?.[0] as
-			GPUBindGroupDescriptor | undefined;
+			| GPUBindGroupDescriptor
+			| undefined;
 		expect(runtime.device.createBindGroup.mock.calls.length).toBe(bindGroupCountAfterA + 1);
 		expect(
 			Array.from(latestBindGroup?.entries ?? []).some((entry) => entry.resource === viewB)
@@ -1245,7 +1246,8 @@ describe('createRenderer', () => {
 		const pipelinesAfterInit = runtime.device.createRenderPipeline.mock.calls.length;
 		const bindGroupsAfterInit = runtime.device.createBindGroup.mock.calls.length;
 		const initialBindGroupDescriptor = runtime.device.createBindGroup.mock.calls.at(-1)?.[0] as
-			GPUBindGroupDescriptor | undefined;
+			| GPUBindGroupDescriptor
+			| undefined;
 		const initialTextureView = Array.from(initialBindGroupDescriptor?.entries ?? []).find(
 			(entry) => entry.binding === 3
 		)?.resource;
@@ -1288,7 +1290,8 @@ describe('createRenderer', () => {
 		expect(runtime.device.createBindGroup).toHaveBeenCalledTimes(bindGroupsAfterUpload + 1);
 		expect(runtime.device.createRenderPipeline).toHaveBeenCalledTimes(pipelinesAfterInit);
 		const restoredBindGroupDescriptor = runtime.device.createBindGroup.mock.calls.at(-1)?.[0] as
-			GPUBindGroupDescriptor | undefined;
+			| GPUBindGroupDescriptor
+			| undefined;
 		expect(
 			Array.from(restoredBindGroupDescriptor?.entries ?? []).find((entry) => entry.binding === 3)
 				?.resource
@@ -1463,7 +1466,8 @@ describe('createRenderer', () => {
 		expect(runtime.renderPasses[0]?.setPipeline).toHaveBeenCalledWith(directCanvasPipeline);
 
 		const descriptor = runtime.commandEncoders[0]?.beginRenderPass.mock.calls[0]?.[0] as
-			GPURenderPassDescriptor | undefined;
+			| GPURenderPassDescriptor
+			| undefined;
 		const attachment = Array.from(descriptor?.colorAttachments ?? [])[0];
 		expect(attachment?.clearValue).toEqual({ r: 0.25, g: 0, b: 0, a: 0.25 });
 	});
@@ -1666,7 +1670,8 @@ describe('createRenderer', () => {
 		const canvasTexture = runtime.context.getCurrentTexture.mock.results[0]?.value;
 		const passRender = pass.render as ReturnType<typeof vi.fn>;
 		const passContext = passRender.mock.calls[0]?.[0] as
-			Parameters<NonNullable<RenderPass['render']>>[0] | undefined;
+			| Parameters<NonNullable<RenderPass['render']>>[0]
+			| undefined;
 		expect(passContext).toEqual(
 			expect.objectContaining({
 				output: expect.objectContaining({ width: 10, height: 10, format: 'rgba8unorm' }),
@@ -2169,9 +2174,11 @@ describe('createRenderer', () => {
 		expect(runtime.commandEncoders[0]?.beginComputePass).toHaveBeenCalledTimes(2);
 		const computeEncoder = runtime.computePasses[0];
 		const firstPipeline = runtime.device.createComputePipeline.mock.calls[0]?.[0] as
-			GPUComputePipelineDescriptor | undefined;
+			| GPUComputePipelineDescriptor
+			| undefined;
 		const secondPipeline = runtime.device.createComputePipeline.mock.calls[1]?.[0] as
-			GPUComputePipelineDescriptor | undefined;
+			| GPUComputePipelineDescriptor
+			| undefined;
 		const firstCode = (firstPipeline?.compute.module as unknown as { code?: string })?.code;
 		const secondCode = (secondPipeline?.compute.module as unknown as { code?: string })?.code;
 		expect(firstCode).toContain('var sourceTex: texture_2d');

packages/motion-gpu/src/tests/fixtures/MotionGPUUserTypedNamespaceProbe.svelte

@@ -17,7 +17,7 @@
 
 	let { onProbe }: Props = $props();
 	const pluginStore = useMotionGPUUserContext<UserMap>('plugin');
-	const assertType = <T,>(value: T): void => {
+	const assertType = <T>(value: T): void => {
 		void value;
 	};
 	setMotionGPUUserContext('plugin', () => ({ enabled: true }), {

packages/motion-gpu/src/tests/react-frag-canvas.runtime.test.tsx

@@ -805,7 +805,8 @@ describe('React FragCanvas runtime', () => {
 		});
 
 		const firstRenderInput = created[0]?.render.mock.calls[0]?.[0] as
-			{ uniforms: Record<string, unknown>; textures: Record<string, unknown> } | undefined;
+			| { uniforms: Record<string, unknown>; textures: Record<string, unknown> }
+			| undefined;
 		expect(firstRenderInput?.uniforms['uGain']).toBe(0.75);
 		expect(firstRenderInput?.textures['uTex']).toBeTruthy();
 
@@ -822,7 +823,8 @@ describe('React FragCanvas runtime', () => {
 		});
 
 		const secondRenderInput = created[1]?.render.mock.calls[0]?.[0] as
-			{ uniforms: Record<string, unknown>; textures: Record<string, unknown> } | undefined;
+			| { uniforms: Record<string, unknown>; textures: Record<string, unknown> }
+			| undefined;
 		expect('uGain' in (secondRenderInput?.uniforms ?? {})).toBe(false);
 		expect('uTex' in (secondRenderInput?.textures ?? {})).toBe(false);
 	});
@@ -909,7 +911,8 @@ describe('React FragCanvas runtime', () => {
 		await flushFrame(32);
 		await waitFor(() => {
 			const latest = onErrorHistory.mock.calls[onErrorHistory.mock.calls.length - 1]?.[0] as
-				Array<{ rawMessage: string }> | undefined;
+				| Array<{ rawMessage: string }>
+				| undefined;
 			expect(latest).toHaveLength(1);
 			expect(latest?.[0]?.rawMessage).toContain('Unknown uniform "uMissing"');
 		});
@@ -926,7 +929,8 @@ describe('React FragCanvas runtime', () => {
 		await flushFrame(48);
 		await waitFor(() => {
 			const latest = onErrorHistory.mock.calls[onErrorHistory.mock.calls.length - 1]?.[0] as
-				Array<{ rawMessage: string }> | undefined;
+				| Array<{ rawMessage: string }>
+				| undefined;
 			expect(latest).toHaveLength(2);
 			expect(latest?.[0]?.rawMessage).toContain('Unknown uniform "uMissing"');
 			expect(latest?.[1]?.rawMessage).toContain('Unknown texture "uMissing"');
@@ -944,7 +948,8 @@ describe('React FragCanvas runtime', () => {
 		await flushFrame(64);
 		await waitFor(() => {
 			const latest = onErrorHistory.mock.calls[onErrorHistory.mock.calls.length - 1]?.[0] as
-				Array<{ rawMessage: string }> | undefined;
+				| Array<{ rawMessage: string }>
+				| undefined;
 			expect(latest).toHaveLength(2);
 			expect(latest?.[0]?.rawMessage).toContain('Unknown texture "uMissing"');
 			expect(latest?.[1]?.rawMessage).toContain('Unknown uniform "uMissing"');