viewfx 0.0.5

package/src/masks.cjs

@@ -0,0 +1,99 @@
+/**
+ * Mask shapes for the ViewFX Tailwind plugin.
+ *
+ * Declared as readable SVG and emitted as base64 custom properties
+ * (`pnpm emit:masks` → `src/masks.css`). Base64 matters: an SVG data URI
+ * containing a nested `url(#id)` filter reference breaks CSS minifiers
+ * when written literally into a stylesheet.
+ */
+
+const svg = (viewBox, body) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${body}</svg>`
+
+const blur = (deviation) =>
+  `<defs><filter id="b"><feGaussianBlur stdDeviation="${deviation}"/></filter></defs>`
+
+const MASK_SVG = {
+  circle: svg('0 0 40 40', '<circle cx="20" cy="20" r="20" fill="#fff"/>'),
+
+  'circle-blur': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="20" cy="20" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tl': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="0" cy="0" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tr': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="40" cy="0" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-bl': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="0" cy="40" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-br': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="40" cy="40" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  square: svg('0 0 40 40', '<rect width="40" height="40" fill="#fff"/>'),
+
+  soft: svg(
+    '0 0 40 40',
+    `${blur(1.4)}<ellipse cx="20" cy="20" rx="18" ry="16" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  diamond: svg('0 0 40 40', '<polygon points="20,0 40,20 20,40 0,20" fill="#fff"/>'),
+
+  hexagon: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25" fill="#fff"/>'
+  ),
+
+  star: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#fff"/>'
+  ),
+
+  ink: svg(
+    '0 0 100 100',
+    '<defs><filter id="t">' +
+      '<feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="4" result="n"/>' +
+      '<feDisplacementMap in="SourceGraphic" in2="n" scale="28" xChannelSelector="R" yChannelSelector="G"/>' +
+      '</filter></defs>' +
+      '<circle cx="50" cy="50" r="42" fill="#fff" filter="url(#t)"/>'
+  ),
+
+  heart: svg(
+    '0 0 100 100',
+    '<path fill="#fff" d="M50 96C16 68 2 50 2 28 2 12 14 2 32 2c10 0 15 7 18 14 3-7 8-14 18-14 18 0 30 10 30 26 0 22-14 40-48 68Z"/>'
+  )
+}
+
+function toBase64(markup) {
+  return Buffer.from(markup, 'utf8').toString('base64')
+}
+
+function maskVariables() {
+  const vars = {}
+  for (const [name, markup] of Object.entries(MASK_SVG)) {
+    vars[`--mask-${name}`] = `url("data:image/svg+xml;base64,${toBase64(markup)}")`
+  }
+  return vars
+}
+
+/** `:root` declaration block exposing every shape as `--mask-<name>`. */
+function maskCustomProperties() {
+  const declarations = Object.entries(maskVariables())
+    .map(([name, value]) => `${name}:${value}`)
+    .join(';')
+
+  return `:root{${declarations}}`
+}
+
+module.exports = { MASK_SVG, maskCustomProperties, maskVariables }

package/src/masks.css

@@ -0,0 +1,2 @@
+/* Generated by scripts/emit-masks.mjs — do not edit by hand. */
+:root{--mask-circle:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");--mask-circle-blur:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPjwvZmlsdGVyPjwvZGVmcz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOCIgZmlsbD0iI2ZmZiIgZmlsdGVyPSJ1cmwoI2IpIi8+PC9zdmc+");--mask-corner-tl:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMC42Ii8+PC9maWx0ZXI+PC9kZWZzPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI0MCIgZmlsbD0iI2ZmZiIgZmlsdGVyPSJ1cmwoI2IpIi8+PC9zdmc+");--mask-corner-tr:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMC42Ii8+PC9maWx0ZXI+PC9kZWZzPjxjaXJjbGUgY3g9IjQwIiBjeT0iMCIgcj0iNDAiIGZpbGw9IiNmZmYiIGZpbHRlcj0idXJsKCNiKSIvPjwvc3ZnPg==");--mask-corner-bl:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMC42Ii8+PC9maWx0ZXI+PC9kZWZzPjxjaXJjbGUgY3g9IjAiIGN5PSI0MCIgcj0iNDAiIGZpbGw9IiNmZmYiIGZpbHRlcj0idXJsKCNiKSIvPjwvc3ZnPg==");--mask-corner-br:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMC42Ii8+PC9maWx0ZXI+PC9kZWZzPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjQwIiBmaWxsPSIjZmZmIiBmaWx0ZXI9InVybCgjYikiLz48L3N2Zz4=");--mask-square:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjZmZmIi8+PC9zdmc+");--mask-soft:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS40Ii8+PC9maWx0ZXI+PC9kZWZzPjxlbGxpcHNlIGN4PSIyMCIgY3k9IjIwIiByeD0iMTgiIHJ5PSIxNiIgZmlsbD0iI2ZmZiIgZmlsdGVyPSJ1cmwoI2IpIi8+PC9zdmc+");--mask-diamond:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBvbHlnb24gcG9pbnRzPSIyMCwwIDQwLDIwIDIwLDQwIDAsMjAiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");--mask-hexagon:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDAgOTMuMywyNSA5My4zLDc1IDUwLDEwMCA2LjcsNzUgNi43LDI1IiBmaWxsPSIjZmZmIi8+PC9zdmc+");--mask-star:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDAgNjEsMzUgOTUsMzUgNjgsNTcgNzksOTEgNTAsNzAgMjEsOTEgMzIsNTcgNSwzNSAzOSwzNSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");--mask-ink:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48ZmlsdGVyIGlkPSJ0Ij48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wNDUiIG51bU9jdGF2ZXM9IjQiIHJlc3VsdD0ibiIvPjxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJuIiBzY2FsZT0iMjgiIHhDaGFubmVsU2VsZWN0b3I9IlIiIHlDaGFubmVsU2VsZWN0b3I9IkciLz48L2ZpbHRlcj48L2RlZnM+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDIiIGZpbGw9IiNmZmYiIGZpbHRlcj0idXJsKCN0KSIvPjwvc3ZnPg==");--mask-heart:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNTAgOTZDMTYgNjggMiA1MCAyIDI4IDIgMTIgMTQgMiAzMiAyYzEwIDAgMTUgNyAxOCAxNCAzLTcgOC0xNCAxOC0xNCAxOCAwIDMwIDEwIDMwIDI2IDAgMjItMTQgNDAtNDggNjhaIi8+PC9zdmc+")}

package/src/masks.js

@@ -0,0 +1,97 @@
+/**
+ * Mask shapes for the ViewFX Tailwind plugin.
+ *
+ * Declared as readable SVG and emitted as base64 custom properties
+ * (`pnpm emit:masks` → `src/masks.css`). Base64 matters: an SVG data URI
+ * containing a nested `url(#id)` filter reference breaks CSS minifiers
+ * when written literally into a stylesheet.
+ */
+
+const svg = (viewBox, body) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${body}</svg>`
+
+const blur = (deviation) =>
+  `<defs><filter id="b"><feGaussianBlur stdDeviation="${deviation}"/></filter></defs>`
+
+export const MASK_SVG = {
+  circle: svg('0 0 40 40', '<circle cx="20" cy="20" r="20" fill="#fff"/>'),
+
+  'circle-blur': svg(
+    '0 0 40 40',
+    `${blur(2)}<circle cx="20" cy="20" r="18" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tl': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="0" cy="0" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-tr': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="40" cy="0" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-bl': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="0" cy="40" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  'corner-br': svg(
+    '0 0 40 40',
+    `${blur(0.6)}<circle cx="40" cy="40" r="40" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  square: svg('0 0 40 40', '<rect width="40" height="40" fill="#fff"/>'),
+
+  soft: svg(
+    '0 0 40 40',
+    `${blur(1.4)}<ellipse cx="20" cy="20" rx="18" ry="16" fill="#fff" filter="url(#b)"/>`
+  ),
+
+  diamond: svg('0 0 40 40', '<polygon points="20,0 40,20 20,40 0,20" fill="#fff"/>'),
+
+  hexagon: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25" fill="#fff"/>'
+  ),
+
+  star: svg(
+    '0 0 100 100',
+    '<polygon points="50,0 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#fff"/>'
+  ),
+
+  ink: svg(
+    '0 0 100 100',
+    '<defs><filter id="t">' +
+      '<feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="4" result="n"/>' +
+      '<feDisplacementMap in="SourceGraphic" in2="n" scale="28" xChannelSelector="R" yChannelSelector="G"/>' +
+      '</filter></defs>' +
+      '<circle cx="50" cy="50" r="42" fill="#fff" filter="url(#t)"/>'
+  ),
+
+  heart: svg(
+    '0 0 100 100',
+    '<path fill="#fff" d="M50 96C16 68 2 50 2 28 2 12 14 2 32 2c10 0 15 7 18 14 3-7 8-14 18-14 18 0 30 10 30 26 0 22-14 40-48 68Z"/>'
+  )
+}
+
+function toBase64(markup) {
+  return Buffer.from(markup, 'utf8').toString('base64')
+}
+
+export function maskVariables() {
+  const vars = {}
+  for (const [name, markup] of Object.entries(MASK_SVG)) {
+    vars[`--mask-${name}`] = `url("data:image/svg+xml;base64,${toBase64(markup)}")`
+  }
+  return vars
+}
+
+/** `:root` declaration block exposing every shape as `--mask-<name>`. */
+export function maskCustomProperties() {
+  const declarations = Object.entries(maskVariables())
+    .map(([name, value]) => `${name}:${value}`)
+    .join(';')
+
+  return `:root{${declarations}}`
+}

package/src/mosaic.cjs

@@ -0,0 +1,24 @@
+/** 8×8 lattice. Tiles bloom from each cell with a feathered edge. */
+const PERIOD = '12.5%'
+const CENTER = '6.25%'
+const GROW = '8%'
+const CORE = '6.6%'
+
+const mosaicStripe = (axis) =>
+  `repeating-linear-gradient(${axis}#0000 0,#0000 calc(${CENTER} - var(--fx-mosaic) * ${GROW}),#fff calc(${CENTER} - var(--fx-mosaic) * ${CORE}),#fff calc(${CENTER} + var(--fx-mosaic) * ${CORE}),#0000 calc(${CENTER} + var(--fx-mosaic) * ${GROW}),#0000 ${PERIOD})`
+
+const mosaicMaskImage = `${mosaicStripe('')},${mosaicStripe('90deg,')}`
+
+const mosaicNewRoot = {
+  mask: 'none',
+  maskImage: mosaicMaskImage,
+  WebkitMaskImage: mosaicMaskImage,
+  maskSize: '100% 100%',
+  WebkitMaskSize: '100% 100%',
+  maskRepeat: 'no-repeat',
+  WebkitMaskRepeat: 'no-repeat',
+  maskComposite: 'intersect',
+  WebkitMaskComposite: 'source-in'
+}
+
+module.exports = { mosaicMaskImage, mosaicNewRoot }

package/src/plugin.cjs

@@ -0,0 +1,41 @@
+const plugin = require('tailwindcss/plugin')
+const { engineBase } = require('./engine.cjs')
+const effects = require('./effects.cjs')
+const { registerCompound } = require('./compound.cjs')
+const { duration, delay, steps } = require('./theme.json')
+
+module.exports = plugin(
+  function viewfx({ addBase, addUtilities, matchUtilities, theme }) {
+    addBase(engineBase())
+    addUtilities(effects)
+    registerCompound({ matchUtilities })
+
+    matchUtilities(
+      {
+        'fx-duration': (value) => ({ '--fx-duration-override': value })
+      },
+      { values: theme('fxDuration') }
+    )
+
+    matchUtilities(
+      {
+        'fx-delay': (value) => ({ '--fx-delay': value })
+      },
+      { values: theme('fxDelay') }
+    )
+
+    matchUtilities(
+      {
+        'fx-steps': (value) => ({ '--fx-ease-override': `steps(${value})` })
+      },
+      { values: theme('fxSteps') }
+    )
+  },
+  {
+    theme: {
+      fxDuration: duration,
+      fxDelay: delay,
+      fxSteps: steps
+    }
+  }
+)

package/src/plugin.js

@@ -0,0 +1 @@
+export { default } from './plugin.cjs'

package/src/theme.json

@@ -0,0 +1,43 @@
+{
+  "duration": {
+    "none": "0ms",
+    "slower": "500ms",
+    "slow": "400ms",
+    "normal": "300ms",
+    "fast": "200ms",
+    "faster": "100ms",
+    "0": "0ms",
+    "100": "100ms",
+    "150": "150ms",
+    "200": "200ms",
+    "250": "250ms",
+    "300": "300ms",
+    "400": "400ms",
+    "500": "500ms",
+    "700": "700ms",
+    "800": "800ms",
+    "900": "900ms",
+    "1000": "1000ms"
+  },
+  "delay": {
+    "none": "0ms",
+    "0": "0ms",
+    "100": "100ms",
+    "150": "150ms",
+    "200": "200ms",
+    "250": "250ms",
+    "300": "300ms",
+    "400": "400ms",
+    "500": "500ms",
+    "700": "700ms",
+    "800": "800ms",
+    "900": "900ms",
+    "1000": "1000ms"
+  },
+  "steps": {
+    "none": "0",
+    "retro": "8",
+    "normal": "16",
+    "modern": "24"
+  }
+}