Skip to content

WSS 3.1

Choose a tag to compare

View all tags
@WebbaLuca WebbaLuca released this 28 Apr 23:57
· 5 commits to main since this release
v3.1
a67da75

Forge 3.1

A complete release of the wss3-forge package: dashboard and marketing primitives, a full motion system, nine production-ready templates, a refreshed Blocks library, AI skill packs, and a deep accessibility pass.

Highlights

  • New dashboard primitives: PageSection, PricingCard, Counter, KpiCard, ChartLegend
  • New chart types: StackedAreaChart, StackedBar, plus Sparkline hover tooltips
  • Card variant="raised" and a documented elevation ladder so nested cards stop falling back to outlined
  • DateRangePicker and a fully rewritten DateTimePicker with a unified calendar and time popup
  • TimeAgo, VirtualList, ErrorBoundary, plus utility hooks (useDebounce, useThrottle, useLocalStorage, useKeyboardShortcut, and more)

Motion

The full Motion stack ships in 3.1. Primitives, hooks, gestures, scroll effects, text effects, and canvas backgrounds, all behind one import path and all respecting prefers-reduced-motion.

  • Primitives: Motion, AnimatePresence, MotionConfig, Stagger, RevealOnScroll, Parallax, StickySection
  • Gestures: Magnetic, Tilt, Spotlight
  • Effects: Marquee (with fadeEdges), GlowArea, Shimmer, Aura, Breathe, Confetti, FlipCard, ScratchCard, HoloEffect, MatteEffect, Sticker
  • Text: GradientText, Typewriter, Kinetic, Cipher, TextShimmer, NumberCounter, CircularText
  • Canvas: Starfield, ConstellationGrid, ParticleField, MeshGradient, NetworkGraph
  • Hooks: useMotionValue, useTransform, useSpring, useScrollMotion, useScrollProgress, useInView, useScrollReveal, and more

Templates and Blocks

Nine production-ready templates available on the docs site, each shipped as a downloadable ZIP with a buyer-ready README and license:

Atelier (creative agency), Beacon (single-screen video hero), Forno (wood-fired pizzeria), Helio (modern dashboard SaaS), Iro (calm video hero), Petra (editorial), Solène (restaurant), Spool (lightweight SaaS landing), Vault (privacy-first storage).

The Blocks library has been refreshed with auth, dashboard, charts, navigation, and settings building blocks.

AI skills

Forge ships skill packs for Claude Code and Cursor. Run npx wss3-forge init once and the /forge skill loads when AI edits a .tsx file.

  • SKILL.md rules, anti-patterns, mobile gotchas, component quick reference
  • components.md every component, every prop
  • tokens.md full token list with values
  • theming.md ForgeProvider, dark and light, custom themes
  • motion.md primitives, hooks, tokens, common compositions
  • patterns.md ready-to-use layouts (dashboard, form, auth, modal, settings, marketing)
  • a11y.md accessibility playbook per component
  • anti-patterns.md what not to do, with the right alternative
  • getting-started.md, migration.md, faq.md for onboarding and upgrades

Accessibility

A pass across 17 components: ARIA roles, keyboard handlers, focus traps, and aria-* plumbing on Button, IconButton, Input, Tabs, Accordion, Dropdown, Tooltip, Switch, Slider, Combobox, NumberInput, Sheet, BottomSheet, ProgressBar, ProgressRing, Avatar, Popover,
TableOfContents.

Refinements

  • Marquee gains fadeEdges so logo strips dissolve into the surrounding background
  • Divider becomes context-aware inside a VStack / HStack / Stack. Default spacing switches to 'none' automatically, the parent's gap owns rhythm.
  • Button variant="link" is now flush-aligned (no more 16px horizontal shift inside Cards or Stacks)
  • Card variant="elevated" reads as a lifted dark panel with stronger shadows
  • Light-theme parity audit removed hardcoded rgba(255,255,255,...) values from Badge, Tabs, Pills, Switch, Table
  • ButtonGroup.size extends to 'xl' to match the rest of the family
  • Popover content portals to document.body, so it escapes ancestors with backdrop-filter, transform, or perspective
  • LineChart tooltips work without showDots
  • DonutChart.centerContent is now anchored to the donut SVG bounds, not the wrapper

Breaking changes

  • Banner.closable and AnnouncementBanner.closable renamed to showCloseButton (aligns with Drawer, Modal)
  • Pills.selected renamed to value (aligns with Tabs, SegmentedControl)
  • The previous re-export of the responsive Section as PageSection has been removed. PageSection is now its own dedicated component with a focused marketing-section API. If you used Section for a titled content card, keep importing it from Card.

A migration guide ships inside the package: skills/forge/migration.md.

Install

npm install wss3-forge@3.1.0
npx wss3-forge init

Links

- Docs: https://forge.webba-creative.com
- Components: https://forge.webba-creative.com/docs/components
- Motion: https://forge.webba-creative.com/motion
- Templates: https://forge.webba-creative.com/templates
- Discord: https://discord.gg/DwzReVGzdp

Full notes in ./CHANGELOG.md.
Assets 2
Loading