@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/brand/UiBrandMark.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { BrandProduct } from 'nuxtseo-shared/brand'
+import { BRAND_PALETTE_DARK, BRAND_PALETTE_LIGHT, drawingToSvg, markDrawing } from 'nuxtseo-shared/brand'
+import { computed, useId } from 'vue'
+
+/**
+ * The summit: the pen climbs a foothill, then the Nuxt peak, and lands on the
+ * apex. Free lands on a green dot. Pro climbs in a violet gradient and lands on
+ * a violet dot. Ink follows the text colour. `animate` draws the climb once,
+ * then lands the dot.
+ */
+const { product = 'free', size = 28, palette = 'css', animate = false } = defineProps<{
+  product?: BrandProduct
+  /** Rendered size in px. 18 and below uses the heavier small cut. */
+  size?: number
+  palette?: 'css' | 'light' | 'dark'
+  animate?: boolean
+}>()
+
+// A page can show several marks, some hidden; each needs its own gradient id.
+const id = useId()
+const svg = computed(() => {
+  const brandPalette = palette === 'css' ? undefined : palette === 'dark' ? BRAND_PALETTE_DARK : BRAND_PALETTE_LIGHT
+  return drawingToSvg(markDrawing({ product, size }), { palette: brandPalette, idPrefix: `brand-mark-${id}`, width: size, height: size, attrs: 'aria-hidden="true"' })
+})
+</script>
+
+<template>
+  <!-- Trusted markup: drawingToSvg only interpolates the brand's own path data. -->
+  <span
+    data-ui="UiBrandMark"
+    class="ui-brand-mark inline-flex shrink-0 leading-none"
+    :class="{ 'ui-brand-mark--draw': animate }"
+    role="img"
+    :aria-label="product === 'pro' ? 'Nuxt SEO Pro' : 'Nuxt SEO'"
+    v-html="svg"
+  />
+</template>
+
+<style scoped>
+/* The climb is the second path (after the shadowed flank); the landing dot is the last circle. */
+@media (prefers-reduced-motion: no-preference) {
+  .ui-brand-mark--draw :deep(path:nth-of-type(2)) {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: ui-brand-mark-draw 0.8s var(--ease-standard, ease-out) forwards;
+  }
+  .ui-brand-mark--draw :deep(circle:last-of-type) {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: ui-brand-mark-land 0.45s var(--ease-spring, ease-out) 0.7s both;
+  }
+}
+
+@keyframes ui-brand-mark-draw {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes ui-brand-mark-land {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
+}
+</style>

package/app/components/brand/UiModuleIcon.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { BrandLanding } from 'nuxtseo-shared/brand'
+import { BRAND_PALETTE_DARK, BRAND_PALETTE_LIGHT, drawingToSvg, iconDrawing, isBrandIconName, markDrawing } from 'nuxtseo-shared/brand'
+import { computed } from 'vue'
+
+/**
+ * A Nuxt SEO module's hand-drawn icon from `nuxtseo-shared/brand`, or the summit
+ * mark for the `nuxt-seo` meta module. One even pen in the text colour; only the
+ * landing dot takes colour: `free` green when a module shipped it, `pro` violet
+ * when Pro read it back. An unknown slug renders nothing.
+ *
+ * `palette` swaps the theme-aware CSS paints for static colours, for renderers
+ * without CSS variables (OG images).
+ */
+const { module, landing = 'free', size = 20, palette = 'css' } = defineProps<{
+  module: string
+  landing?: BrandLanding
+  /** Rendered size in px. Smaller icons get a heavier pen and a bigger dot. */
+  size?: number
+  palette?: 'css' | 'light' | 'dark'
+}>()
+
+// The summit lands on its own dot; a list that hides inactive dots hides this one too.
+function summit(landing: BrandLanding) {
+  const mark = markDrawing({ size })
+  if (landing !== 'none')
+    return mark
+  return { ...mark, groups: mark.groups.map(group => ({ ...group, shapes: group.shapes.filter(shape => shape._tag !== 'Dot') })) }
+}
+
+const svg = computed(() => {
+  const drawing = module === 'nuxt-seo'
+    ? summit(landing)
+    : isBrandIconName(module) ? iconDrawing(module, { landing, size }) : undefined
+  if (!drawing)
+    return ''
+  const brandPalette = palette === 'css' ? undefined : palette === 'dark' ? BRAND_PALETTE_DARK : BRAND_PALETTE_LIGHT
+  return drawingToSvg(drawing, { palette: brandPalette, width: size, height: size })
+})
+</script>
+
+<template>
+  <!-- Trusted markup: drawingToSvg only interpolates the brand's own path data. -->
+  <span v-if="svg" data-ui="UiModuleIcon" class="inline-flex shrink-0 leading-none" aria-hidden="true" v-html="svg" />
+</template>

package/app/components/brand/UiProLettering.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { BRAND_PALETTE_DARK, BRAND_PALETTE_LIGHT, drawingToSvg, PRO_LETTERING_ASPECT, PRO_LETTERING_SCALE, proLetteringDrawing } from 'nuxtseo-shared/brand'
+import { computed } from 'vue'
+
+/**
+ * "Pro", lettered with the module icon pen and underlined with one swipe.
+ * Set `size` to the wordmark's font size; the lettering scales from it.
+ */
+const { size = 18, palette = 'css' } = defineProps<{
+  /** Font size of the wordmark it sits beside, in px. */
+  size?: number
+  /** Static colours for renderers without CSS variables (OG images). */
+  palette?: 'css' | 'light' | 'dark'
+}>()
+
+const svg = computed(() => {
+  const height = Math.round(size * PRO_LETTERING_SCALE)
+  const brandPalette = palette === 'css' ? undefined : palette === 'dark' ? BRAND_PALETTE_DARK : BRAND_PALETTE_LIGHT
+  return drawingToSvg(proLetteringDrawing(), { palette: brandPalette, width: Math.round(height * PRO_LETTERING_ASPECT), height, attrs: 'aria-hidden="true"' })
+})
+</script>
+
+<template>
+  <!-- Trusted markup: drawingToSvg only interpolates the brand's own path data. -->
+  <span data-ui="UiProLettering" class="inline-flex shrink-0 leading-none" role="img" aria-label="Pro" v-html="svg" />
+</template>

package/app/components/brand/UiRangeTerrain.vue

@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { m, useReducedMotion } from 'motion-v'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import { UiAtmosphere } from '#components'
+import { RANGE_DEFAULT_SERIES, RANGE_RIDGE_OPACITY, RANGE_SHADE } from './range-glyphs'
+
+// UiRangeTerrain — "the Range". Growth as a mountain range, drawn IN the same
+// shade glyphs instead of an SVG fill — developed from the
+// brand-kit sandbox's "Terrain" experiment (`apps/brand-kit/app/pages/topo-crt.vue`).
+// It is a chart that happens to be beautiful: every ridge is the real series
+// (later ridges are the same values read at a different phase, for depth —
+// never fabricated), never decoration. Pure function of props for the DATA:
+// no random, no Date, so the silhouette is deterministic. The glyph FONT SIZE
+// is the one client-measured exception — a ResizeObserver sizes glyphs to the
+// container's real pixel width (container-query units broke on the mono
+// fallback stack, see the git history), so first paint briefly uses a static
+// CSS fallback size until the client measurement lands.
+//
+// Layering (back → front): UiAtmosphere sun bloom + haze veil sit behind the
+// glyphs; ridges stack front-over-back at opacity 1 / 0.65 / 0.4 (default 3),
+// each built from the same interpolated series read at a different rotation.
+
+const {
+  series = RANGE_DEFAULT_SERIES,
+  ridges = 3,
+  columns = 48,
+  height = 240,
+  sun = 'dusk',
+  haze = false,
+  animate = true,
+  pulse = 0,
+  fill = false,
+} = defineProps<{
+  /** The trend the range renders. Later ridges are the same values, phase-shifted — real data, never fabricated. */
+  series?: number[]
+  /** Number of layered ridgelines, front to back. */
+  ridges?: number
+  /** Grid columns — one sample per column after interpolating `series`. */
+  columns?: number
+  /** Rendered height in px. */
+  height?: number
+  /** Sun bloom behind the range. 'none' renders no bloom (for the ink/OG ground). */
+  sun?: 'dusk' | 'dawn' | 'none'
+  /** Soft mist veil over the whole range, for a hazier read. */
+  haze?: boolean
+  /** Bottom-up build reveal + slow ridge drift. Reduced motion is always static regardless of this prop. */
+  animate?: boolean
+  /** Bump this number to fire one shimmer sweep across the range. */
+  pulse?: number
+  /** Stretch to fill (and bottom-anchor within) the nearest positioned ancestor — for a hero/CTA/OG backdrop use, instead of the default in-flow box. */
+  fill?: boolean
+}>()
+
+const reduced = useReducedMotion()
+const canAnimate = computed(() => animate && !reduced.value)
+
+// Font sizing: measure the real pixel width of the mono glyph stack once
+// (a probe span at a fixed reference size), then derive the exact font-size
+// that makes `columns` characters span the terrain's real measured width.
+// Re-derives on resize via useElementSize — no container-query units.
+const terrainRef = useTemplateRef<HTMLElement>('terrainRef')
+const probeRef = useTemplateRef<HTMLElement>('probeRef')
+const { width: measuredWidth } = useElementSize(terrainRef)
+const GLYPH_PROBE_SIZE = 100
+const glyphWidthRatio = ref<number | null>(null)
+
+onMounted(() => {
+  const probeWidth = probeRef.value?.getBoundingClientRect().width
+  if (probeWidth)
+    glyphWidthRatio.value = probeWidth / GLYPH_PROBE_SIZE
+})
+
+// Width is the only free dimension: `columns` samples must span the measured
+// box width exactly, monospace. (Row COUNT is then derived from this size
+// below — it is not a second independent input, or the two fought each other:
+// a fixed row-count heuristic forced a row height the width-driven font-size
+// couldn't fit, clipping every row or leaving a bare gap down one side.)
+const fontSizePx = computed(() => {
+  if (!measuredWidth.value || !glyphWidthRatio.value)
+    return null
+  const cols = Math.max(1, Math.round(columns))
+  const size = measuredWidth.value / cols / glyphWidthRatio.value
+  return Math.max(4, Math.min(48, size))
+})
+
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t
+}
+
+// Resample `series` (any length) onto exactly `columns` samples — one sample
+// per column, per the contract. Plain linear interpolation, deterministic.
+function interpolateSeries(values: number[], targetLength: number): number[] {
+  const n = values.length
+  if (n === 0)
+    return Array.from<number>({ length: targetLength }).fill(0)
+  if (targetLength <= 1)
+    return [values[n - 1] ?? 0]
+  return Array.from({ length: targetLength }, (_, i) => {
+    const t = (i / (targetLength - 1)) * (n - 1)
+    const lo = Math.floor(t)
+    const hi = Math.min(n - 1, lo + 1)
+    const frac = t - lo
+    const a = values[lo] ?? 0
+    const b = values[hi] ?? a
+    return a + (b - a) * frac
+  })
+}
+
+// Circular rotation — a ridge "behind" the front one reads the same real
+// values at a different phase, which is what makes the layered silhouette
+// read as depth without inventing a single number.
+function rotate(values: number[], offset: number): number[] {
+  const n = values.length
+  if (n === 0)
+    return values
+  return Array.from({ length: n }, (_, i) => values[(((i + offset) % n) + n) % n] ?? 0)
+}
+
+// Character rows for the grid — an independent resolution choice, bounded so
+// a tiny/huge `height` still renders sensibly. The CSS grid track height
+// (below) is always exactly `height / rows`, whatever that number is — even
+// where a row's own glyph (sized off `columns`, above) renders taller than
+// its track, `overflow: hidden` crops each row to its own slim band, which
+// for a solid block glyph just reads as a finer-grained texture. Decoupling
+// rows from the glyph's font-size (instead of trying to make one row's track
+// equal the glyph's natural line height) is what gives a wide, short box
+// enough vertical resolution to read as a ridgeline instead of a stair-step.
+const totalRows = computed(() => Math.max(14, Math.min(48, Math.round(height / 8))))
+
+interface RidgeLayer {
+  rows: string[]
+  opacity: number
+  z: number
+  driftPx: number
+  driftDuration: number
+}
+
+const ridgeLayers = computed<RidgeLayer[]>(() => {
+  const count = Math.max(1, Math.round(ridges))
+  const interpolated = interpolateSeries(series, Math.max(1, Math.round(columns)))
+  const max = Math.max(...series, 1)
+  const n = interpolated.length
+  const rows = totalRows.value
+
+  return Array.from({ length: count }, (_, k) => {
+    // k: 0 = furthest back, count-1 = front (the undistorted series).
+    const t = count > 1 ? k / (count - 1) : 1
+    const offset = Math.round((count - 1 - k) * n / (count * 3))
+    const values = rotate(interpolated, offset)
+
+    // Back ridges sit high with little relief (compressed silhouette); the
+    // front ridge has a low baseline and the full amplitude (dramatic peaks).
+    // Baseline+amplitude never reach 1: sky stays visible above every ridge,
+    // even at its own tallest column.
+    const baselineFrac = lerp(0.3, 0.08, t)
+    const ampFrac = lerp(0.2, 0.55, t)
+
+    const heights = values.map((v) => {
+      const norm = max > 0 ? v / max : 0
+      const frac = Math.min(1, baselineFrac + ampFrac * norm)
+      return Math.round(frac * rows)
+    })
+
+    // Build rows top-to-bottom; each filled cell shades denser toward the
+    // baseline and lighter toward that column's own peak tip.
+    const gridRows = Array.from({ length: rows }, (_, r) => {
+      const fromBottom = rows - 1 - r
+      return heights
+        .map((h) => {
+          if (fromBottom >= h)
+            return ' '
+          const depth = h > 0 ? fromBottom / h : 0
+          const shadeIdx = Math.max(0, RANGE_SHADE.length - 1 - Math.floor(depth * RANGE_SHADE.length))
+          return RANGE_SHADE[shadeIdx]
+        })
+        .join('')
+    })
+
+    const frontRank = count - 1 - k
+    return {
+      rows: gridRows,
+      opacity: RANGE_RIDGE_OPACITY[Math.min(RANGE_RIDGE_OPACITY.length - 1, frontRank)] ?? 0.15,
+      z: k + 1,
+      driftPx: k % 2 === 0 ? 4 + frontRank : -(4 + frontRank),
+      driftDuration: lerp(19, 12, t),
+    }
+  })
+})
+
+const terrainStyle = computed(() => ({
+  'height': `${height}px`,
+  '--terrain-rows': String(totalRows.value),
+  ...(fontSizePx.value ? { fontSize: `${fontSizePx.value}px` } : {}),
+}))
+</script>
+
+<template>
+  <div class="range-terrain-wrap" :class="{ 'range-terrain-wrap--fill': fill }">
+    <span v-if="$slots.label" class="sr-only"><slot name="label" /></span>
+    <div ref="terrainRef" class="range-terrain" aria-hidden="true" :style="terrainStyle">
+      <span ref="probeRef" class="terrain-probe" aria-hidden="true">0</span>
+      <UiAtmosphere v-if="sun !== 'none'" :palette="sun" geometry="bloom" intensity="subtle" />
+      <UiAtmosphere v-if="haze" palette="mist" geometry="veil" intensity="subtle" />
+
+      <m.div
+        v-for="ridge in ridgeLayers"
+        :key="ridge.z"
+        class="terrain-ridge"
+        :style="{ opacity: ridge.opacity, zIndex: ridge.z }"
+        :animate="canAnimate ? { x: [0, ridge.driftPx, 0] } : {}"
+        :transition="canAnimate ? { repeat: Infinity, duration: ridge.driftDuration, ease: 'easeInOut' } : { duration: 0 }"
+      >
+        <m.div
+          v-for="(row, r) in ridge.rows"
+          :key="r"
+          class="terrain-row"
+          :initial="canAnimate ? { opacity: 0 } : false"
+          :while-in-view="{ opacity: 1 }"
+          :in-view-options="{ once: true }"
+          :transition="canAnimate ? { delay: (ridge.rows.length - 1 - r) * 0.018, duration: 0.25 } : { duration: 0 }"
+        >
+          {{ row }}
+        </m.div>
+      </m.div>
+
+      <m.div
+        v-if="pulse > 0"
+        :key="`shimmer-${pulse}`"
+        class="terrain-shimmer"
+        :initial="{ x: '-40%', opacity: 1 }"
+        :animate="{ x: '140%' }"
+        :transition="{ duration: 1.1, ease: 'easeInOut' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.range-terrain-wrap {
+  position: relative;
+}
+
+/* `fill` prop — stretch to the nearest positioned ancestor, bottom-anchoring
+   the (fixed-height) terrain box inside it. A modifier class defined here,
+   not fought over with a consumer's own scoped override: two same-specificity
+   selectors from different SFCs race on load order, and the LATER-loaded
+   stylesheet wins regardless of which file the consumer expects to win. */
+.range-terrain-wrap--fill {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.range-terrain {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  font-size: 0.85rem; /* static fallback until the client measurement lands */
+}
+
+.terrain-probe {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  font-family: var(--font-mono);
+  font-size: 100px;
+  line-height: 1;
+  white-space: pre;
+}
+
+.terrain-ridge {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  /* Explicit even row tracks — a flex column with percentage flex-basis
+     resolves against an INDEFINITE parent height as content-sized (each row
+     falls back to its own font-metric height), so the ridge's natural height
+     silently overflowed the box by 2x+ and got clipped to only its densest
+     baseline rows, reading as one solid fill with no sky. Grid tracks divide
+     the box's real height exactly, regardless of font metrics. */
+  grid-template-rows: repeat(var(--terrain-rows), 1fr);
+  pointer-events: none;
+}
+
+.terrain-row {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-variant-ligatures: none;
+  font-size: 1em;
+  line-height: 1;
+  white-space: pre;
+  color: var(--ui-color-primary-400);
+}
+
+.terrain-shimmer {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  width: 30%;
+  pointer-events: none;
+  background: linear-gradient(105deg, transparent, color-mix(in oklch, white 45%, transparent), transparent);
+  mix-blend-mode: overlay;
+}
+</style>

package/app/components/brand/range-glyphs.ts

@@ -0,0 +1,18 @@
+// Shared glyph vocabulary + defaults for "the Range" brand system
+// (UiRangeTerrain). Kept in a plain module (not the `<script
+// setup>` block) so these can be referenced as prop defaults without hitting
+// the temporal-dead-zone ordering `defineProps` compiles to when it must lead
+// the script block.
+
+// Four mono shade characters, lightest to densest — the vocabulary the
+// brand-kit sandbox established (`apps/brand-kit/app/pages/topo-crt.vue`,
+// "ASCII mark" + "Terrain" sections).
+export const RANGE_SHADE = ['░', '▒', '▓', '█'] as const
+
+// The 18-point click trend from the sandbox's Terrain experiment — the
+// default series UiRangeTerrain renders when a host doesn't pass its own.
+export const RANGE_DEFAULT_SERIES = [12, 18, 15, 22, 28, 24, 33, 30, 38, 44, 40, 52, 48, 61, 58, 73, 69, 88]
+
+// Front-to-back ridge opacity ladder — exact for the default 3 ridges,
+// extends gracefully for a caller that asks for more.
+export const RANGE_RIDGE_OPACITY = [1, 0.65, 0.4, 0.28, 0.18]

package/app/components/container/BrowserTab.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Browser-like presentation shell shared by product and tools surfaces.
+interface Tab {
+  id: string
+  label: string
+}
+
+const props = defineProps<{
+  filename?: string
+  tabs?: Tab[]
+}>()
+
+const activeTab = defineModel<string>('activeTab', { default: '' })
+
+// Initialize activeTab to first tab if not set
+if (!activeTab.value && props.tabs?.[0]) {
+  activeTab.value = props.tabs[0].id
+}
+</script>
+
+<template>
+  <div>
+    <div class="relative">
+      <div class="absolute -inset-8 -z-10 pointer-events-none">
+        <div class="blob blob-1" />
+        <div class="blob blob-2" />
+        <div class="blob blob-3" />
+        <div class="blob blob-4" />
+      </div>
+      <div class="bg-default border border-default rounded-2xl overflow-hidden">
+        <div class="bg-elevated px-4 py-3 border-b border-default flex items-center gap-2">
+          <div class="flex gap-1.5">
+            <div class="size-3 rounded-full bg-red-400/60" />
+            <div class="size-3 rounded-full bg-yellow-400/60" />
+            <div class="size-3 rounded-full bg-green-400/60" />
+          </div>
+          <template v-if="tabs?.length">
+            <div class="flex ml-2">
+              <button
+                v-for="tab in tabs"
+                :key="tab.id"
+                type="button"
+                class="px-3 py-1 text-xs font-mono rounded-t border-x border-t transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-border-accented)]"
+                :class="activeTab === tab.id
+                  ? 'bg-default border-default text-default'
+                  : 'bg-transparent border-transparent text-dimmed hover:text-muted'"
+                @click="activeTab = tab.id"
+              >
+                {{ tab.label }}
+              </button>
+            </div>
+          </template>
+          <span v-else-if="filename" class="text-xs text-dimmed font-mono ml-2">{{ filename }}</span>
+        </div>
+        <div class="px-6 py-4 font-mono text-sm text-muted space-y-2">
+          <template v-if="tabs?.length">
+            <template v-for="tab in tabs" :key="tab.id">
+              <div v-show="activeTab === tab.id">
+                <slot :name="tab.id" />
+              </div>
+            </template>
+          </template>
+          <slot v-else />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blob {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(48px);
+  opacity: 0.2;
+}
+
+.blob-1 {
+  width: 300px;
+  height: 300px;
+  left: -50px;
+  top: -50px;
+  background-color: var(--ui-color-info-500);
+  animation: blob1 8s ease-in-out infinite;
+}
+
+.blob-2 {
+  width: 350px;
+  height: 350px;
+  right: -80px;
+  bottom: -80px;
+  background-color: var(--ui-color-primary-500);
+  animation: blob2 10s ease-in-out infinite;
+}
+
+.blob-3 {
+  width: 250px;
+  height: 250px;
+  left: 30%;
+  top: 20%;
+  background-color: var(--ui-color-info-400);
+  animation: blob3 12s ease-in-out infinite;
+}
+
+.blob-4 {
+  width: 200px;
+  height: 200px;
+  right: 20%;
+  top: -30px;
+  background-color: var(--ui-color-primary-400);
+  animation: blob4 9s ease-in-out infinite;
+}
+
+/* The blobs loop forever beside content (WCAG 2.2.2, 2.3.3): reduced motion
+   holds them still at their first frame. */
+@media (prefers-reduced-motion: reduce) {
+  .blob-1,
+  .blob-2,
+  .blob-3,
+  .blob-4 {
+    animation: none;
+  }
+}
+
+@keyframes blob1 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(60px, 40px) scale(1.3); }
+}
+
+@keyframes blob2 {
+  0%, 100% { transform: translate(0, 0) scale(1.2); }
+  50% { transform: translate(-50px, -60px) scale(0.9); }
+}
+
+@keyframes blob3 {
+  0%, 100% { transform: translate(0, 0) scale(0.9); }
+  33% { transform: translate(40px, -30px) scale(1.2); }
+  66% { transform: translate(-40px, 30px) scale(0.9); }
+}
+
+@keyframes blob4 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-40px, 50px) scale(0.8); }
+}
+</style>