@retro-crt/svelte 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 retro-crt contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# retro-crt
+
+A CRT monitor effect your content renders *inside*. Curvature, bloom and chromatic aberration apply
+to the real pixels of whatever you wrap, not a scanline sticker on top.
+
+Zero runtime dependencies. 9.3 KB gzipped.
+
+## Install
+
+```bash
+npm install retro-crt                      # plain JS
+npm install retro-crt @retro-crt/react     # or /vue, /svelte, /solid, /angular
+```
+
+## Use it
+
+```js
+import { CRT } from 'retro-crt'
+import 'retro-crt/styles.css'
+
+const screen = CRT.mount('#app', { curvature: 0.4 })
+
+screen.update({ curvature: 0.7 })
+screen.activeRenderer // 'webgl' | 'svg' | 'css'
+screen.destroy()
+```
+
+```jsx
+import { CRTScreen } from '@retro-crt/react'
+import 'retro-crt/styles.css'
+
+<CRTScreen curvature={0.4} scanlines={{ intensity: 0.6 }}>
+  <App />
+</CRTScreen>
+```
+
+Every adapter takes the same plain `CRTOptions` object. All adapters are SSR-safe. To wrap a whole
+page, call `CRT.mountFullPage()`.
+
+> **Wrapping content breaks `position: fixed` inside it.** A CSS filter makes its element the
+> containing block for every fixed descendant. Use `CRT.mountFullPage()` for a whole page, which the
+> spec exempts.
+
+## Renderers
+
+`renderer: 'auto'` picks one of three tiers from measured facts, never the user-agent string.
+
+| | `webgl` | `svg` | `css` |
+|---|---|---|---|
+| Curvature | true barrel | approximation | edge shading |
+| Chromatic aberration | yes | yes | no |
+| Persistence | yes | no | no |
+| Content stays interactive | **no** | yes | yes |
+| Picked for | a lone image, video or canvas | Chrome and Firefox on desktop | Safari over animating content, low-end devices |
+
+The WebGL tier is a separate chunk that loads only when something uses it.
+
+## Options
+
+```ts
+interface CRTOptions {
+  renderer?: 'auto' | 'webgl' | 'svg' | 'css'        // 'auto'
+  background?: string                                // '#000000'
+  curvature?: number                                 // 0-1, 0.3
+  vignette?: number                                  // 0-1, 0.5
+  scanlines?: { intensity?: number; gap?: number; flicker?: boolean }   // 0.5, 3px, false
+  tint?: { preset?: 'default' | 'green' | 'amber' | 'blue' | 'violet' | 'lime' | 'pink' | 'red'
+           strength?: number }                       // 'default', 0.35
+  bloom?: { enabled?: boolean; radius?: number; strength?: number; threshold?: number }
+  chromaticAberration?: { intensity?: number }       // 0-6px, 0.6
+  noise?: { enabled?: boolean; static?: number }     // true, 0.04
+  persistence?: { strength?: number }                // 0-0.5, 0 (webgl only)
+  bezel?: { enabled?: boolean; thickness?: number; radius?: { outer?: number; screen?: number }
+            color?: string; bevel?: number; lightAngle?: number; innerLip?: number
+            screenSpill?: number; glare?: number; shadow?: boolean }
+  quality?: 'auto' | 'high' | 'balanced' | 'low'     // 'auto'
+  maxPixelRatio?: number                             // 2
+  pauseWhenOffscreen?: boolean                       // true
+  respectReducedMotion?: boolean                     // true
+  respectSaveData?: boolean                          // true
+}
+```
+
+Out-of-range numbers clamp. Unknown values fall back to the default. `background` and `bezel.color`
+accept `#rgb`, `#rrggbb` and `rgb()` only. When a renderer cannot honour an option you set, it
+ignores it and warns once in development.
+
+`prefers-reduced-motion` stops flicker, grain and persistence. `prefers-reduced-transparency` halves
+tint and bloom. Save-Data forces the CSS tier. Effect layers are `aria-hidden` and
+`pointer-events: none`.
+
+## License
+
+MIT

package/dist/CRTScreen.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte'
+  import { CRT, type CRTOptions, type CRTScreen as Screen, type Quality, type Renderer } from 'retro-crt'
+
+  interface Props extends CRTOptions {
+    children?: Snippet
+    class?: string
+    style?: string
+    onrendererchange?: (renderer: Renderer, quality: Quality) => void
+  }
+
+  let { children, class: className, style, onrendererchange, ...options }: Props = $props()
+  let host: HTMLDivElement
+  let screen: Screen | undefined = $state()
+
+  $effect(() => {
+    const s = CRT.mount(host, untrack(() => $state.snapshot(options)))
+    const notify = () => untrack(() => onrendererchange?.(s.activeRenderer, s.activeQuality))
+    const unsubscribe = s.subscribe(notify)
+    notify()
+    screen = s
+    return () => {
+      unsubscribe()
+      s.destroy()
+    }
+  })
+
+  $effect(() => {
+    const next = $state.snapshot(options)
+    untrack(() => screen)?.set(next)
+  })
+</script>
+
+<div bind:this={host} class={className} {style}>
+  <div data-rcrt-content="">{@render children?.()}</div>
+</div>

package/dist/CRTScreen.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type CRTOptions, type Quality, type Renderer } from 'retro-crt';
+interface Props extends CRTOptions {
+    children?: Snippet;
+    class?: string;
+    style?: string;
+    onrendererchange?: (renderer: Renderer, quality: Quality) => void;
+}
+declare const CRTScreen: import("svelte").Component<Props, {}, "">;
+type CRTScreen = ReturnType<typeof CRTScreen>;
+export default CRTScreen;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CRTScreen } from './CRTScreen.svelte';
+export type { CRTOptions } from 'retro-crt';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as CRTScreen } from './CRTScreen.svelte';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@retro-crt/svelte",
+  "version": "1.0.0",
+  "description": "Svelte adapter for retro-crt",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.8",
+    "retro-crt": "^1.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.0",
+    "svelte": "^5.8.0",
+    "retro-crt": "*"
+  },
+  "author": "pixelyokai",
+  "homepage": "https://github.com/pixelyokai/retro-crt/tree/main/packages/svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pixelyokai/retro-crt.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/pixelyokai/retro-crt/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "crt",
+    "retro",
+    "scanlines",
+    "effect",
+    "svelte"
+  ]
+}