@lofcz/streamdown-effects 0.0.0-bootstrap.0 → 1.0.1

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2023 Vercel, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Matches `AnimationEffect` in streamdown. Declared here so this package has
+ * no runtime or type dependency on it.
+ */
+export interface AnimationEffect {
+    decorate?: (text: string, seed: number) => Record<`data-${string}`, string>;
+    duration?: number;
+    name: string;
+    scatter?: number;
+}
+/**
+ * Same-shape noise for a word: letters and digits become random characters
+ * of the same class; punctuation and spacing are kept. Deterministic for a
+ * given seed.
+ */
+export declare const noise: (text: string, seed: number) => string;
+/** Words sharpen out of a blur, in scattered order. */
+export declare const diffuse: AnimationEffect;
+/**
+ * Words start as noise glyphs that change once, then resolve to the real
+ * text, in scattered order. The real text stays in the DOM throughout.
+ */
+export declare const scramble: AnimationEffect;

package/dist/index.js

@@ -0,0 +1 @@
+var i=/\p{Lu}/u,u=/\p{L}/u,f=/\p{N}/u,c="abcdefghijklmnopqrstuvwxyz",m=c.toUpperCase(),l="0123456789",d=(e,t)=>{let n=Math.sin(e*12.9898+t*78.233)*43758.5453;return n-Math.floor(n)},o=(e,t,n)=>e.charAt(Math.floor(d(t,n)*e.length)),a=(e,t)=>{let n="",r=0;for(let s of e)i.test(s)?n+=o(m,t,r):u.test(s)?n+=o(c,t,r):f.test(s)?n+=o(l,t,r):n+=s,r+=1;return n},p={duration:420,name:"diffuse",scatter:140},E={decorate:(e,t)=>({"data-sd-glyphs":a(e,t),"data-sd-glyphs-alt":a(e,t+1)}),duration:320,name:"scramble",scatter:160};export{p as diffuse,a as noise,E as scramble};

package/package.json

@@ -1,11 +1,43 @@
 {
   "name": "@lofcz/streamdown-effects",
-  "version": "0.0.0-bootstrap.0",
-  "description": "Streaming text effects for Streamdown's animated prop (name claim — real releases are published from CI via npm trusted publishing)",
-  "license": "Apache-2.0",
+  "version": "1.0.1",
+  "description": "Streaming text effects for Streamdown's animated prop",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lofcz/streamdown-ng.git",
     "directory": "packages/streamdown-effects"
+  },
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.10",
+    "tsup": "^8.5.1",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "test": "vitest run",
+    "test:coverage": "vitest --coverage run"
   }
-}
+}

package/styles.css

@@ -0,0 +1,89 @@
+@keyframes sd-diffuse {
+  from {
+    opacity: 0;
+    filter: blur(8px);
+  }
+  55% {
+    opacity: 0.75;
+    filter: blur(2px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/*
+ * scramble: the real word is laid out but unpainted while noise glyphs,
+ * drawn over it from data attributes, change once and then resolve. The text
+ * stays in the DOM, so selection, copy and assistive tech get real words; the
+ * glyphs use empty alt text.
+ */
+@keyframes sd-scramble {
+  from {
+    -webkit-text-fill-color: transparent;
+    animation-timing-function: step-end;
+  }
+  to {
+    -webkit-text-fill-color: currentcolor;
+  }
+}
+
+@keyframes sd-glyphs {
+  from {
+    opacity: 1;
+  }
+  50%,
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes sd-glyphs-alt {
+  from {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+[data-sd-glyphs] {
+  position: relative;
+}
+
+[data-sd-glyphs]::before,
+[data-sd-glyphs]::after {
+  /* Block offset stays auto: the static position starts at the top of the
+     line box, so the glyphs share the text's baseline. */
+  position: absolute;
+  inset-inline-start: 0;
+  -webkit-text-fill-color: currentcolor;
+  white-space: pre;
+  pointer-events: none;
+  animation: sd-glyphs var(--sd-duration, 320ms) step-end var(--sd-delay, 0ms)
+    both;
+}
+
+[data-sd-glyphs]::before {
+  content: attr(data-sd-glyphs) / "";
+}
+
+[data-sd-glyphs]::after {
+  content: attr(data-sd-glyphs-alt) / "";
+  animation-name: sd-glyphs-alt;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-sd-glyphs] {
+    animation-name: sd-fadeIn;
+  }
+
+  [data-sd-glyphs]::before,
+  [data-sd-glyphs]::after {
+    content: none;
+  }
+}

package/README.md

@@ -1,5 +0,0 @@
-# @lofcz/streamdown-effects
-
-This version (`0.0.0-bootstrap.0`, dist-tag `bootstrap`) is a name claim so npm
-trusted publishing can be attached to the package. Real releases are published
-from CI: https://github.com/lofcz/streamdown-ng (packages/streamdown-effects).