tw-shimmer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+
+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,93 @@
+# tw-shimmer
+
+Tailwind CSS v4 plugin for shimmer effects.
+
+## Installation
+
+```bash
+npm install tw-shimmer
+```
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "tw-shimmer";
+```
+
+## Usage
+
+The shimmer effect uses `background-clip: text`, so you need to set a text color for the base text:
+
+```html
+<div class="shimmer text-foreground/40">Loading...</div>
+```
+
+Use opacity (`/40`, `/50`, etc.) to make the shimmer effect visible.
+
+## API
+
+### `shimmer`
+
+Base utility. Apply to any element with a text color.
+
+```html
+<div class="shimmer text-foreground/40">Loading...</div>
+```
+
+### `shimmer-speed-{value}`
+
+Animation speed in pixels per second. Default: `100px/s`.
+
+Values are unitless numbers (units auto-appended): `50`, `100`, `150`, `200`, etc.
+
+```html
+<div class="shimmer shimmer-speed-200 text-foreground/40">Fast (200px/s)</div>
+```
+
+### `--shimmer-width-x`
+
+CSS variable for container width used in speed calculations. Default: `200px`.
+
+Set this at runtime to match your actual container width for accurate speed.
+
+```tsx
+<div class="shimmer" style={{ ["--shimmer-width-x" as string]: "300px" }}>
+  Wide container
+</div>
+```
+
+Duration formula: `(width * 2) / speed`
+
+### `shimmer-color-{color}`
+
+Shimmer highlight color. Default: `currentColor`.
+
+Uses Tailwind color palette.
+
+```html
+<div class="shimmer shimmer-color-blue-500 text-blue-500/40">Colored</div>
+```
+
+### `shimmer-spread-{spacing}`
+
+Width of the shimmer highlight. Default: `6ch`.
+
+Uses Tailwind spacing scale.
+
+```html
+<div class="shimmer shimmer-spread-12 text-foreground/40">Wide highlight</div>
+```
+
+### `shimmer-angle-{degrees}`
+
+Shimmer direction. Default: `90deg`.
+
+Values are unitless numbers (deg auto-appended): `0`, `45`, `90`, `180`, etc.
+
+```html
+<div class="shimmer shimmer-angle-45 text-foreground/40">Diagonal (45deg)</div>
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tw-shimmer",
+  "description": "Tailwind CSS v4 plugin for shimmer effects",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./src/index.css"
+    }
+  },
+  "main": "./src/index.css",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "homepage": "https://www.assistant-ui.com/tw-shimmer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/assistant-ui/assistant-ui/tree/main/packages/tw-shimmer"
+  },
+  "bugs": {
+    "url": "https://github.com/assistant-ui/assistant-ui/issues"
+  }
+}

package/src/index.css

@@ -0,0 +1,53 @@
+@theme inline {
+  @keyframes shimmer {
+    0% {
+      background-position: 150% 0;
+    }
+    100% {
+      background-position: -50% 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --shimmer-speed: 100px;
+  --shimmer-width-x: 200px;
+  --shimmer-color: black;
+  --shimmer-spread: 6ch;
+  --shimmer-angle: 90deg;
+  background:
+    linear-gradient(
+        var(--shimmer-angle),
+        transparent calc(50% - var(--shimmer-spread) * 0.5),
+        color-mix(in oklch, currentColor, var(--shimmer-color) 90%) 50%,
+        transparent calc(50% + var(--shimmer-spread) * 0.5)
+      )
+      0 0 / 200% 100% no-repeat,
+    linear-gradient(currentColor, currentColor);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer
+    calc((var(--shimmer-width-x) * 2) / var(--shimmer-speed) * 1s) infinite
+    linear;
+
+  @variant dark {
+    --shimmer-color: white;
+  }
+}
+
+@utility shimmer-speed-* {
+  --shimmer-speed: calc(--value(number) * 1px);
+}
+
+@utility shimmer-color-* {
+  --shimmer-color: --value(--color-*);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: --spacing(--value(integer));
+}
+
+@utility shimmer-angle-* {
+  --shimmer-angle: calc(--value(number) * 1deg);
+}