A premium hire-a-freelancer card: banner with soft zoom, avatar with online dot, half-star rating, meta chips, a tools row and a glossy "Get in touch" CTA. Self-contained CSS, light & dark, fully accessible.
React
TypeScript
lucide-react
A polished profile card for marketplaces and portfolios. It shows a tinted banner that gently zooms on hover, an avatar with an online indicator and ring, a real half-star rating, meta chips (rating, duration, rate), a tools row, a bookmark toggle that fills when saved, and a primary call-to-action. The whole card lifts on hover. Ships as a single self-contained file (injects its own CSS, no Tailwind required), works in light or dark, and is built React 19 + TypeScript strict with accessible, reduced-motion-aware interactions.
A composable analytics card whose chart comes alive on hover: the area fills, the trend line brightens, bars cascade up, points pop, a live point pulses, a value chip slides in and a light sheen sweeps across. clsx + tailwind-merge.
React 19
React
TypeScript
Animated Card Chart is a composable analytics card whose visual wakes up on hover: the area fills, the trend line brightens, bars rise in a staggered cascade, data points pop, a live point pulses, a value chip slides in, and a light sheen sweeps across while the whole card lifts.
Composable, drop-in API: AnimatedCard / CardVisual / CardBody / CardTitle / CardDescription, plus Visual3 (the chart) with mainColor / secondaryColor to recolor instantly. Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
A media-frame grid where hovering a frame expands its row and column (the whole grid reflows smoothly) and tilts that single card in 3D toward the cursor with a glare. Bring your own clips/images. Framer Motion.
React 19
React
TypeScript
Dynamic Frame Layout is an interactive grid of media frames. Hovering a frame expands its row and column — the whole grid re-flows smoothly via framer-motion — while that single card tilts in 3D toward the cursor with a moving glare. Other cards stay flat.
Each frame's media can be a video URL, image URL, or any React node; the built-in defaults are original animated gradient tiles (no third-party assets bundled), so it looks great before you add content. Configurable columns, gap and hover-expand amount. Self-contained CSS, accessible focus support, prefers-reduced-motion friendly. React 19 + TypeScript. Requires framer-motion. Original work for Assetzaar.
An interactive skewed grid background: cells light up in a palette color under the pointer and fade back over seconds, leaving a trail of light, with a radial mask blending the grid into your hero. Self-contained, framer-motion.
React 19
React
TypeScript
Background Boxes puts a living, perspective-skewed grid behind your hero content. As the pointer moves, each cell it passes snaps to a color from the palette and then fades back over a couple of seconds, leaving a trail of light. A radial mask fades the grid into the background at the edges so your text stays readable.
Ships two pieces: Boxes (the raw grid, memoized so parent re-renders never reshuffle the random cell colors) and BackgroundBoxes (a ready hero with the mask and a content slot). Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
A premium 3D hero card: a floating Three.js character that follows the cursor — or drop in any Spline/GLB scene — beside a glass spotlight and your copy. Self-contained, accessible, reduced-motion aware.
React 19
React
TypeScript
Scene 3D is an interactive 3D hero for React 19 and TypeScript. Out of the box it renders an original Three.js character — a floating bot whose head and glowing eyes follow the cursor — next to a glass spotlight and your headline. It is the dependency-light way to add real, immersive 3D to a hero without wrestling a 3D pipeline.
Bring your own scene in two ways: set a Spline URL and it lazy-loads @splinetool/react-spline (and its runtime) only when used; or pass a .glb/.gltf model URL for the Three.js stage, with optional cursor-tracking pupils that work on any model (rigged or not) plus named-eye rotation for rigged characters. If a model fails to load it gracefully falls back to the built-in bot.
Self-contained CSS (injected once, no Tailwind), accessible copy, and prefers-reduced-motion aware (it calms the float/animation). Original work for Assetzaar. Core install needs three; add @splinetool/react-spline only if you use a Spline scene.
A macOS-style glass dock: icons magnify by pointer proximity (the classic fisheye) and push neighbours apart, with name tooltips, running-app dots and a click bounce. Pure React + CSS, keyboard-accessible, zero dependencies.
React 19
React
TypeScript
Glass Dock recreates the macOS dock for React 19 and TypeScript. Icons scale up based on how close the pointer is and gently push their neighbours apart — the classic dock fisheye — written straight to CSS variables on pointermove, so there are no re-renders and no dependencies. Hovering shows a name tooltip, "open" apps get a running-indicator dot, and clicking an icon bounces it.
It is fully self-contained: it injects its own CSS and an Apple-grade system font once on mount, needs no Tailwind, is keyboard accessible (focus magnifies too) and respects prefers-reduced-motion. No third-party app icons are bundled — pass your own via the apps prop, or use the original gradient tiles it ships with. Light and dark variants. Original work for Assetzaar.
An interactive team gallery: the panel under the pointer or keyboard focus expands while the others compress into vertical name tags, revealing role and social links. Pure-CSS magnify, accessible, self-contained.
React 19
React
TypeScript
Lineup is an interactive "bento" team gallery for React 19 and TypeScript. The panel under the pointer — or keyboard focus — smoothly expands while the others compress into slim columns with vertical name tags; the expanded panel reveals the person's name, role and social links, and the photo zooms subtly.
The magnify is pure CSS (no JS measuring), so it stays buttery and works on focus-within for keyboard users. It is fully self-contained: it injects its own CSS and a system font once on mount, ships with graceful avatar fallbacks (a generated gradient when a photo fails), respects prefers-reduced-motion, and is light by default with an optional dark theme. On small screens it stacks into expandable rows.
Drop in your own members (name, role, photo, socials) or use the bundled placeholders. Icons via lucide-react. Original work for Assetzaar.
A luxury multi-chain swap and bridge widget: token and network pickers with search, a cross-chain route pill, slippage settings, a rate / fee / price-impact / minimum-received breakdown and a glossy light-sweep CTA. Self-contained, accessible, zero dependencies. Prices and balances are example props — wire your own quotes.
React
React 19
TypeScript
Aurora Swap is a premium multi-chain token swap and bridge widget for React 19 and TypeScript, built from scratch with zero dependencies. It injects its own CSS and fonts once on mount, so it looks identical in any project with no Tailwind required. It includes token and network pickers with search, a spring-loaded direction switch, a luminous cross-chain route pill, slippage settings, and a full rate / price-impact / fee / minimum-received breakdown, plus a light-sweep CTA. Honesty first: token symbols are real but all prices and balances are EXAMPLE props — there are no live quotes and no on-chain calls. Wire your own quote source and wallet handlers (onSwap, onConnect) in production. Accessible (labelled controls, visible focus rings) and prefers-reduced-motion aware.
A premium split-flap (Solari) display board with realistic two-phase flap animation, character stepping, a per-column wave, multi-line support and full theming — self-contained, accessible, zero dependencies, zero required props.
React
React 19
TypeScript
Flip Board recreates the classic airport and train split-flap departure board for React 19 and TypeScript. Each character physically flips — the top leaf folds down while the new leaf falls into place — stepping through the charset to the target with a left-to-right wave. It is fully self-contained: it injects its own CSS and the JetBrains Mono web-font once on mount, so it renders identically in any project with no Tailwind or config required. Multi-line text is auto-centered into a stable grid so the board can flip between messages — perfect for cycling status text, marquees and hero displays. Everything is tokenized through CSS variables, so you can resize and recolor whole boards with a handful of properties. Accessible and battery-friendly: it exposes the text to screen readers (role=img with aria-label), respects prefers-reduced-motion, and cleans up its timers on unmount.
97 evidence-led UX, UI, research, design-system and QA skills with portable workflows for Claude, Codex, Cursor and Gemini.
Works with Claude Code · Cursor · Codex · GitHub Copilot
SKILL.md
Claude Code
Cursor
A production-focused enhancement of MC Dean's MIT-licensed Designer Skills collection. It includes 97 SKILL.md modules and 29 complete workflow commands across research, UX strategy, UI design, interaction design, design systems, prototyping, testing, visual critique and design operations. Assetzaar's portable orchestrator adds evidence discipline, complete UI-state coverage, WCAG-aware and responsive quality gates, privacy checks, implementation acceptance criteria, cross-agent metadata and a package validator. The original copyright, source commit and MIT license are preserved inside the download.
A 3D card that tilts toward the cursor and casts a soft "comet" glare that follows the pointer across its surface. Wrap any content; zero dependencies, reduced-motion aware. Composable CometCard wrapper + a ready-made invite demo.
An interactive 3D card that tilts toward your cursor with CSS perspective, while inner items lift on the Z axis (translateZ) for real depth. Zero dependencies, dark mode, and tilt disabled under reduced-motion. Composable CardContainer / CardBody / CardItem API.
A premium "cutout corner" brand/feature card with an autoplaying muted looping video media band, a notched inset label, a corner badge, a 2x2 feature grid and a CTA. Drop-in, dark-mode and reduced-motion friendly, lucide-react only.
A premium animated light-rain background: falling light streaks with additive glow, twinkling stars, a soft radial bloom and gentle mouse parallax. Pure Canvas 2D — no WebGL, no dependencies. Drops behind any hero.
React
React 19
TypeScript
Aurora Lightfall is a premium animated background for React 19 + TypeScript built in plain Canvas 2D — no WebGL, no ogl, zero dependencies. Falling light streaks with additive glow, twinkling stars, a soft radial bloom and gentle mouse parallax sit behind any hero or section. Performance-minded: capped device-pixel-ratio, a single canvas with lighter compositing, pauses when off-screen (IntersectionObserver) or when the tab is hidden, and honors prefers-reduced-motion (renders one calm static frame). Fully themeable via props (colors, speed, count, glow, twinkle, angle, background bloom, mouse parallax). Decorative by construction (aria-hidden / role=presentation). Single file, default export.
A premium animated-gradient button with a bright light orbiting the edge, four variants, five sizes, loading/disabled states and an under-glow — self-installing keyframes (no tailwind.config edits), accessible, zero required props.
React
React 19
TypeScript
Aurora Button is a premium animated-gradient button for React 19 + TypeScript + Tailwind CSS. A bright light orbits the edge over an elevated surface (CSS transform animation — visible in every browser and on any background). Self-installing: it injects its own keyframes once on mount, so there are no tailwind.config or global CSS edits. Palette via --ab-1…--ab-5 tokens with premium defaults; rebrand any button inline. Four variants (gradient / inverted / outline / solid / ghost) and five sizes including icon. Built-in loading state with spinner + aria-busy, disabled, focus-visible ring and active press; asChild (Radix Slot) renders it as a link; prefers-reduced-motion pauses all motion. Strict TypeScript, accessible (WCAG AA).
Free doesn't have to mean low quality. These are production-grade products you can download instantly and use in real projects, a great way to start before you buy.
FAQ
FAQ
Yes. Free products are claimed at no cost and added to your library with a clear license and instant download. There's no hidden fee or surcharge.
Check each product's license, many free resources permit personal and commercial use, and the license is stated clearly on the product page before you claim it.
