@nous-research/ui 0.14.2 → 0.16.0

package/src/ui/components/tier-card.stories.tsx

@@ -0,0 +1,217 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import fillerBg from '../../assets/filler-bg0.webp'
+import { TierCard } from './tier-card'
+
+const SCOUT_SRC = fillerBg.src ?? (fillerBg as unknown as string)
+
+// Same tier palette referenced in `Poster.stories.tsx` and originally from
+// `nous-account-service/src/app/manage-subscription/_components/TierCard.tsx`.
+// Keep the two in sync so a design review can compare the card layout and
+// the bare poster side-by-side.
+const TIERS = [
+  {
+    bullets: ['Free models only'],
+    label: 'Scout',
+    price: { primary: 'Free', primarySuffix: '/mo' },
+    src: SCOUT_SRC,
+    tint: '#88ccaa'
+  },
+  {
+    bullets: ['300+ models', 'Hosted tool usage', '$5 monthly credits'],
+    label: 'Visor',
+    price: { primary: '$5', primarySuffix: '/mo' },
+    src: '/img/hermes-2.png',
+    tint: '#99bbdd'
+  },
+  {
+    bullets: [
+      '300+ models',
+      'Hosted tool usage',
+      '$20 monthly credits',
+      '$40 rollover cap'
+    ],
+    label: 'Angel',
+    price: { primary: '$20', primarySuffix: '/mo' },
+    src: '/img/hermes-3.jpg',
+    tint: '#ccaa88'
+  },
+  {
+    bullets: [
+      '300+ models',
+      'Hosted tool usage',
+      '$50 monthly credits',
+      '$100 rollover cap'
+    ],
+    label: 'Herald',
+    price: { primary: '$50', primarySuffix: '/mo' },
+    src: '/img/hermes-4.png',
+    tint: '#dd8899'
+  },
+  {
+    bullets: [
+      '300+ models',
+      'Hosted tool usage',
+      '$150 monthly credits',
+      '$300 rollover cap'
+    ],
+    label: 'Muse',
+    price: { primary: '$200', primarySuffix: '/mo' },
+    src: '/img/hermes-1.png',
+    tint: '#ccaa88'
+  }
+] as const
+
+const HIGHEST_OVERLAY = {
+  overlay: 'rgba(180, 30, 20, 1)',
+  tint: '#ff4444',
+  tintStrength: { active: 0.55, inactive: 0.35 }
+}
+
+const meta = {
+  args: {
+    bullets: [...TIERS[2].bullets],
+    image: TIERS[2].src,
+    price: TIERS[2].price,
+    tint: TIERS[2].tint,
+    title: TIERS[2].label
+  },
+  argTypes: {
+    badge: { control: 'text' },
+    bullets: { control: 'object' },
+    className: { table: { disable: true } },
+    image: { control: 'text' },
+    isCurrent: { control: 'boolean' },
+    onSelect: { action: 'select' },
+    overlay: { control: 'color' },
+    price: { control: 'object' },
+    selected: { control: 'boolean' },
+    tint: { control: 'color' },
+    tintStrength: { control: 'object' },
+    title: { control: 'text' }
+  },
+  component: TierCard,
+  decorators: [
+    (Story, context) => {
+      // Stories that provide their own layout (e.g. `Row`) opt in via the
+      // `tierCardRaw` param. Everything else gets the compact 16rem preview
+      // frame on top of the dark background lens.
+      if (context.parameters?.tierCardRaw) {
+        return <Story />
+      }
+
+      return (
+        <div
+          className="bg-background flex items-center justify-center p-8"
+          style={{ minHeight: '100dvh' }}
+        >
+          <div className="w-[22rem]">
+            <Story />
+          </div>
+        </div>
+      )
+    }
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Selectable subscription-tier card. Fully presentational: the consumer owns the data (tier schema, price formatting, imagery, tints). Toggle `selected` to see the `.arc-border` shimmer and `mix-blend-mode: plus-lighter` lift on the headline / price.'
+      }
+    },
+    layout: 'fullscreen'
+  },
+  title: 'Components/TierCard'
+} satisfies Meta<typeof TierCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/** Default resting state. Hover to preview the arc-border shimmer. */
+export const Idle: Story = {}
+
+/** Selected state — arc-border, active distortion, lifted text. */
+export const Selected: Story = {
+  args: { selected: true }
+}
+
+/** Current plan, not selected — subtle midground border hint. */
+export const Current: Story = {
+  args: { badge: '(current)', isCurrent: true }
+}
+
+/** Current plan AND selected — both treatments compose. */
+export const CurrentSelected: Story = {
+  args: { badge: '(current)', isCurrent: true, selected: true }
+}
+
+/** Highest tier red-overlay treatment. */
+export const HighestTier: Story = {
+  args: {
+    ...HIGHEST_OVERLAY,
+    bullets: [...TIERS[3].bullets],
+    image: TIERS[3].src,
+    price: { primary: '$200', primarySuffix: '/mo' },
+    selected: true,
+    title: 'Sovereign'
+  }
+}
+
+/** Struck-through comparison price (e.g. first-payment discount). */
+export const WithDiscount: Story = {
+  args: {
+    bullets: [...TIERS[2].bullets],
+    image: TIERS[2].src,
+    price: {
+      primary: '$10',
+      primarySuffix: 'first payment',
+      secondary: '$20',
+      secondarySuffix: '/mo'
+    },
+    tint: TIERS[2].tint,
+    title: TIERS[2].label
+  }
+}
+
+/**
+ * Full 5-card row approximating the live manage-subscription page, with
+ * the highest tier carrying the red overlay. Click any card to toggle
+ * selection — mirrors the interaction model in the consumer app.
+ */
+export const Row: StoryObj = {
+  // Opt out of the compact single-card wrapper (see the meta decorator)
+  // and supply a full-width grid instead.
+  decorators: [
+    Story => (
+      <div
+        className="bg-background flex items-center justify-center p-10"
+        style={{ minHeight: '100dvh' }}
+      >
+        <div className="grid w-full max-w-[90rem] grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
+          <Story />
+        </div>
+      </div>
+    )
+  ],
+  parameters: { layout: 'fullscreen', tierCardRaw: true },
+  render: () => (
+    <>
+      {TIERS.map((tier, i) => {
+        const isHighest = i === TIERS.length - 1
+
+        return (
+          <TierCard
+            bullets={[...tier.bullets]}
+            image={tier.src}
+            key={tier.label}
+            price={tier.price}
+            selected={i === 2}
+            title={tier.label}
+            {...(isHighest ? HIGHEST_OVERLAY : { tint: tier.tint })}
+          />
+        )
+      })}
+    </>
+  )
+}

package/src/ui/components/tier-card.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import { cn } from '../../utils'
+
+import { ImageDistortion } from './image-distortion'
+import { Typography } from './typography'
+import { Small } from './typography/small'
+
+/**
+ * Selectable tier / pricing card. Full-bleed distorted image background,
+ * readable overlay text, and an animated `.arc-border` shimmer on the
+ * selected state. Fully presentational — the consumer owns the data
+ * (tier schema, price formatting, tier imagery / tints).
+ *
+ * Visual states:
+ * - `selected`: brightens the distortion, activates `.arc-border`, and
+ *   composites the headline / price with `mix-blend-mode: plus-lighter`
+ *   so the text lifts off the image regardless of tint.
+ * - `isCurrent`: subtle midground-tinted border hint (suppressed when
+ *   `selected` wins).
+ * - `overlay`: optional top-layer color blended with `mix-blend-mode:
+ *   color` — used for the "highest tier" red treatment on top of any
+ *   base tint.
+ */
+export function TierCard({
+  badge,
+  bullets,
+  className,
+  image,
+  isCurrent = false,
+  onSelect,
+  overlay,
+  price,
+  selected = false,
+  tint,
+  tintStrength,
+  title
+}: TierCardProps) {
+  return (
+    <button
+      className={cn(
+        'group relative flex w-full cursor-pointer flex-col border border-current/20',
+        'text-left transition-colors duration-300',
+        selected && 'border-midground/60',
+        isCurrent && !selected && 'border-midground/30',
+        className
+      )}
+      onClick={onSelect}
+      type="button"
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'arc-border transition-opacity duration-200',
+          selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+        )}
+      />
+
+      <div
+        className="relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden"
+        style={{ backgroundColor: 'var(--background)' }}
+      >
+        <ImageDistortion
+          active={selected}
+          src={image}
+          tint={tint}
+          tintStrength={tintStrength}
+        />
+
+        {overlay && (
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{ backgroundColor: overlay, mixBlendMode: 'color' }}
+          />
+        )}
+
+        <div className="pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3">
+          <div className="flex flex-col gap-0.5">
+            <Typography variant="sm" 
+              className={cn(
+                'block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]',
+                'transition-colors',
+                selected && 'text-midground'
+              )}
+              style={selected ? { mixBlendMode: 'plus-lighter' } : undefined}
+            >
+              {title}
+              {badge && <span className="ml-1 opacity-50">{badge}</span>}
+            </Typography>
+
+            {price.secondary ? (
+              <>
+                <Typography
+                  className="block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                  expanded
+                  style={{ mixBlendMode: 'plus-lighter' }}
+                >
+                  {price.secondary}
+                  {price.secondarySuffix && (
+                    <span className="text-[1rem]">
+                      {price.secondarySuffix}
+                    </span>
+                  )}
+                </Typography>
+
+                <Typography
+                  className="block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                  expanded
+                  style={{ mixBlendMode: 'plus-lighter' }}
+                >
+                  {price.primary}
+                  {price.primarySuffix && (
+                    <span className="text-[1rem] opacity-60">
+                      {' '}
+                      {price.primarySuffix}
+                    </span>
+                  )}
+                </Typography>
+              </>
+            ) : (
+              <Typography
+                className="block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                expanded
+                style={{ mixBlendMode: 'plus-lighter' }}
+              >
+                {price.primary}
+                {price.primarySuffix && (
+                  <span className="text-[1rem] opacity-60">
+                    {price.primarySuffix}
+                  </span>
+                )}
+              </Typography>
+            )}
+          </div>
+
+          {bullets.length > 0 && (
+            <ul className="flex flex-col gap-1">
+              {bullets.map((bullet, i) => (
+                <li
+                  className={cn(
+                    'font-courier text-display text-[1rem] leading-tight tracking-tight',
+                    'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',
+                  )}
+                  key={typeof bullet === 'string' ? bullet : i}
+                >
+                  · {bullet}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export interface TierCardPrice {
+  /** Headline price, e.g. `"$20"` or `"Free"`. */
+  primary: string
+  /** Small suffix rendered after `primary`, e.g. `"/mo"` or `"first payment"`. */
+  primarySuffix?: string
+  /** Optional struck-through comparison price rendered above `primary`, e.g. `"$30"`. */
+  secondary?: string
+  /** Small suffix rendered after `secondary`. */
+  secondarySuffix?: string
+}
+
+export interface TierCardProps {
+  /** Small annotation after the title, e.g. `"(current)"`. */
+  badge?: React.ReactNode
+  /** Feature list rendered under the price. */
+  bullets: React.ReactNode[]
+  className?: string
+  /** Background image URL. */
+  image: string
+  /** Applies the "current plan" border hint when not `selected`. */
+  isCurrent?: boolean
+  onSelect?: () => void
+  /** Color blended with `mix-blend-mode: color` over the image (used for the highest-tier red treatment). */
+  overlay?: string
+  price: TierCardPrice
+  /** Applies selected chrome (arc-border shimmer, active distortion, plus-lighter text blend). */
+  selected?: boolean
+  /** Shader tint passed through to `ImageDistortion`. */
+  tint?: string
+  /** Active / inactive tint strength passed through to `ImageDistortion`. */
+  tintStrength?: { active: number; inactive: number }
+  /** Tier name / headline. */
+  title: React.ReactNode
+}

package/src/ui/components/tv.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Suspense } from 'react'
+
+import { TV } from './tv'
+
+const meta = {
+  component: TV,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Animated WebGL brush inside an SVG television frame. Renders a fragment shader, so it only makes sense on the client.'
+      }
+    }
+  },
+  title: 'Components/TV'
+} satisfies Meta<typeof TV>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Suspense>
+      <TV className="h-64 w-64" />
+    </Suspense>
+  )
+}
+
+export const Large: Story = {
+  render: () => (
+    <Suspense>
+      <TV className="h-[28rem] w-[28rem]" />
+    </Suspense>
+  )
+}

package/src/ui/components/tv.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+const VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`
+
+const FRAG = /* glsl */ `precision highp float;
+uniform float t;
+uniform vec2 r;
+
+const float FBM_STR = .08;
+
+float h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+
+float n2(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  f = f * f * (3. - 2. * f);
+
+  return mix(
+    mix(h(i), h(i + vec2(1, 0)), f.x),
+    mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x),
+    f.y
+  );
+}
+
+float fbm(vec2 p) {
+  float v = 0., a = .5;
+
+  for (int i = 0; i < 4; i++) {
+    v += a * n2(p);
+    p *= 2.1;
+    a *= .45;
+  }
+
+  return v;
+}
+
+float drift(float speed, float s) {
+  return fract(t * speed + s + .02 * sin(t * .4 + s * 3.));
+}
+
+float brushAt(vec2 uv, float y, float th, float s) {
+  float hw = .34 + .08 * h(vec2(s, 77.));
+  float cx = .5;
+  float xn = (uv.x - (cx - hw)) / (2. * hw);
+  float env = smoothstep(0., .03, xn) * smoothstep(1., .97, xn);
+  float localTh = th * env;
+
+  if (localTh < .002) return 0.;
+
+  float morph = floor(t * 8.) * .7 + s;
+  float top = y - localTh * .5 + fbm(vec2(uv.x * 6., morph)) * FBM_STR;
+  float bot = y + localTh * .5 - fbm(vec2(uv.x * 6., morph + 30.)) * FBM_STR;
+  float x0 = cx - hw + fbm(vec2(uv.y * 8., morph + 60.)) * FBM_STR;
+  float x1 = cx + hw - fbm(vec2(uv.y * 8., morph + 90.)) * FBM_STR;
+
+  float dMin = min(min(uv.y - top, bot - uv.y), min(uv.x - x0, x1 - uv.x));
+
+  float bristle = n2(vec2(uv.x * 60., uv.y * 8. + s)) * .4
+    + n2(vec2(uv.x * 25., (uv.y - y) * 120. + s)) * .35
+    + n2(vec2(uv.x * 90., uv.y * 3. + s * 2.)) * .25;
+
+  float eaten = smoothstep(.03, 0., dMin) * (1. - smoothstep(.2, .5, bristle));
+
+  return clamp(smoothstep(0., .003, dMin) * (1. - eaten), 0., 1.);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / r;
+  uv = vec2(uv.x * cos(.095) - uv.y * sin(.095), uv.x * sin(.095) + uv.y * cos(.095));
+  uv += vec2(fbm(uv * 4. + t * .06), fbm(uv * 4. + 8. + t * .05)) * .012;
+
+  vec3 c = vec3(.992, .992, .051);
+
+  float smScroll = -drift(.04, 5.) * 2.;
+  float sm = 0.;
+
+  for (int i = 0; i < 20; i++) {
+    sm = max(sm, brushAt(uv, mod(float(i) * .1 + smScroll, 2.) - .5, .04, float(i) + 10.));
+  }
+
+  float d1 = drift(.15, 1.), d2 = drift(.15, 1.37), d3 = drift(.15, 1.58), d4 = drift(.15, 1.82);
+  float big = max(
+    max(brushAt(uv, 1.1 - d1 * 1.4, .28, 1.), brushAt(uv, 1.1 - d2 * 1.4, .18, 2.)),
+    max(brushAt(uv, 1.1 - d3 * 1.4, .3, 3.), brushAt(uv, 1.1 - d4 * 1.4, .15, 4.))
+  );
+
+  c = mix(c, vec3(0.), clamp(max(sm, big), 0., 1.));
+  c *= .94 + .06 * sin(uv.y * r.y * 6.283);
+
+  vec2 raw = gl_FragCoord.xy / r;
+  float dx = min(raw.x - .22, .90 - raw.x);
+  float dy = min(raw.y - .29, .86 - raw.y);
+  float cycle = floor(t * .4);
+  float edge = mix(smoothstep(.22, 0., max(min(dx, dy), 0.)), 1., step(.75, h(vec2(cycle, 13.))))
+    * smoothstep(.85, 1., sin(t * 2.5) * .5 + .5)
+    * (.7 + .3 * h(vec2(cycle, 7.)));
+
+  float scanY = floor(gl_FragCoord.y);
+  float rowNoise = h(vec2(scanY, floor(t * 30.)));
+  c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));
+
+  gl_FragColor = vec4(clamp(c, 0., 1.), 1.);
+}`
+
+function useGL(ref: React.RefObject<HTMLCanvasElement | null>) {
+  const raf = useRef(0)
+
+  useEffect(() => {
+    const c = ref.current
+
+    if (!c) {
+      return
+    }
+
+    const gl = c.getContext('webgl')
+
+    if (!gl) {
+      return
+    }
+
+    const sh = (type: number, src: string) => {
+      const s = gl.createShader(type)!
+      gl.shaderSource(s, src)
+      gl.compileShader(s)
+
+      return s
+    }
+
+    const p = gl.createProgram()!
+    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT))
+    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG))
+    gl.linkProgram(p)
+    gl.useProgram(p)
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.STATIC_DRAW
+    )
+
+    const a = gl.getAttribLocation(p, 'a')
+    gl.enableVertexAttribArray(a)
+    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)
+
+    const uT = gl.getUniformLocation(p, 't')
+    const uR = gl.getUniformLocation(p, 'r')
+
+    const resize = () => {
+      const rect = c.getBoundingClientRect()
+      const dpr = Math.min(devicePixelRatio, 2)
+
+      c.width = rect.width * dpr
+      c.height = rect.height * dpr
+
+      gl.viewport(0, 0, c.width, c.height)
+    }
+
+    resize()
+
+    const ro = new ResizeObserver(resize)
+    ro.observe(c)
+
+    const t0 = performance.now()
+
+    let visible = !document.hidden
+    let inView = true
+    let raf2 = 0
+
+    const tick = () => {
+      gl.uniform1f(uT, (performance.now() - t0) / 1e3)
+      gl.uniform2f(uR, c.width, c.height)
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+
+      raf2 = requestAnimationFrame(tick)
+    }
+
+    const start = () => {
+      if (visible && inView && !raf2) {
+        raf2 = requestAnimationFrame(tick)
+      }
+    }
+
+    const stop = () => {
+      if (raf2) {
+        cancelAnimationFrame(raf2)
+        raf2 = 0
+      }
+    }
+
+    const onVisibility = () => {
+      visible = !document.hidden
+      visible ? start() : stop()
+    }
+
+    const io = new IntersectionObserver(
+      entries => {
+        inView = entries.some(e => e.isIntersecting)
+        inView ? start() : stop()
+      },
+      { threshold: 0 }
+    )
+
+    io.observe(c)
+    document.addEventListener('visibilitychange', onVisibility)
+
+    start()
+    raf.current = raf2
+
+    return () => {
+      stop()
+      io.disconnect()
+      document.removeEventListener('visibilitychange', onVisibility)
+      ro.disconnect()
+    }
+  }, [ref])
+}
+
+export function TV({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  useGL(canvasRef)
+
+  return (
+    <div className={['relative', className].filter(Boolean).join(' ')}>
+      <svg className="relative h-full w-full" fill="none" viewBox="0 0 210 173">
+        <path
+          d="M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z"
+          fill="#FDFD0D"
+          stroke="#FDFD0D"
+          strokeWidth="3.15"
+        />
+
+        <path
+          d="M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z"
+          fill="#000"
+          stroke="#FDFD0D"
+          strokeWidth="4.2"
+        />
+
+        <path
+          d="M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z"
+          fill="#FDFD0D"
+        />
+      </svg>
+
+      <canvas
+        className="absolute inset-0 h-full w-full"
+        ref={canvasRef}
+        style={{
+          clipPath:
+            'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'
+        }}
+      />
+    </div>
+  )
+}