# Design recipe: Creative portfolio or agency site (AgentGid) For a showcase with bold visuals, gradients, 3D and scroll motion. Look: gradient, abstract, glassmorphism, 3d. Use these sources; each was checked on its official pages and its license allows commercial use. Follow each source's license line and credit line. Prefer the first pick in each slot. ## Design tokens (AgentGid editors' choice; values from Radix Colors and Google Fonts) - Fonts: headings Instrument Serif 400, body Inter, code JetBrains Mono (Google Fonts, SIL OFL; in Next.js load them with next/font/google). CSS: https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap - Colors (light): background #fcfcfc, surface #f9f9f9, border #d9d9d9, text #202020, muted #646464, accent #6e56cf (hover #654dc4, soft #f4f0fe). Scales: Radix gray + violet + cyan; dark values in tokens.json. - Type scale: 17px base, ratio 1.414: xs 8.5px, sm 12.0px, base 17.0px, lg 24.0px, xl 34.0px, 2xl 48.0px, 3xl 68.0px, 4xl 96.0px, 5xl 136.0px - Radius 18px (sm 9, lg 27); spacing on a 4px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. - Text on accent buttons: white. Keep body text at least 4.5:1 against its background (WCAG 2.2 AA). - Starter page built from these tokens (HTML + CSS, MIT): https://agentgid.com/assets/recipes/creative-portfolio/starter/ · tokens: https://agentgid.com/assets/recipes/creative-portfolio/starter/tokens.css, https://agentgid.com/assets/recipes/creative-portfolio/starter/tailwind.css, https://agentgid.com/assets/recipes/creative-portfolio/starter/tokens.json - Same starter as a Next.js project (App Router, Tailwind CSS v4, lucide-react, next/font; builds with Next 16.4.0, checked 2026-10-21 16:30 UTC): https://agentgid.com/assets/recipes/creative-portfolio/creative-portfolio-next.zip. Unzip, `npm install`, `npm run dev`; AGENTS.md inside is this brief. ## Libraries - npm install next # Next.js (MIT) - npm install tailwindcss # Tailwind CSS (MIT) - npm install gsap # GSAP (Standard 'no charge' license: https://gsap.com/standard-license.) - npm install motion # Motion (MIT) - npm install lenis # Lenis (MIT) - npm install three # Three.js (MIT) ## Content sources ### Animated blocks - Aceternity UI (UI kits and website templates). Animated React, Tailwind and Motion components, blocks and templates for landing pages; part is free, the rest sold as Pro. Price: free tier; commercial use OK. Style: gradient, glassmorphism, colorful. Connect: download from https://ui.aceternity.com (no API). Get files: Copy-paste or shadcn CLI from ui.aceternity.com; Pro blocks and templates need a purchased account; AI agents can install through an MCP connected to the Aceternity registry (html, css). Not allowed: No resale or redistribution of items Not allowed: Pro content requires purchase Rule: Do not redistribute the items or their source files, and do not sell them or derivatives on any marketplace. Rule: Do not make themes, templates or derivative products to sell. Rule: Some items contain third-party components with their own licences. License: https://ui.aceternity.com/licence (checked 2026-10-21; details: https://agentgid.com/assets/aceternity-ui/) - Magic UI (UI kits and website templates). Copy-and-paste animated React/Tailwind components for landing pages, installable via the shadcn CLI; a paid Pro adds templates and premium components. Price: free tier; commercial use OK; no credit needed. Style: gradient, colorful, minimal. Connect: official MCP server https://magicui.design/docs/mcp. Get files: shadcn CLI / copy-paste from magicui.design/docs; official MCP: pnpm dlx @magicuidesign/cli@latest install cursor (also Claude, Windsurf, Cline) (html, css). Not allowed: Pro licence terms not read Rule: Keep the MIT notice if you redistribute the code. Rule: Pro templates and components are paid and not covered by this MIT file. License: https://raw.githubusercontent.com/magicuidesign/magicui/main/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/magic-ui/) ### Fonts - Google Fonts (Fonts). Open-source font catalog with a Developer API for metadata, a CSS API and the Google Design MCP. Price: free; commercial use OK; no credit needed; ship inside your app with conditions. Connect: official MCP server https://design.googleapis.com/mcp; API docs https://developers.google.com/fonts/docs/developer_api (API key needed). Limits: API key required; quota not stated. Get files: Developer API: GET https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY returns a files map of TTF URLs on fonts.gstatic.com (add capability=WOFF2 for woff2). CSS API: https://fonts.googleapis.com/css?family=.. . Whole collection: https://github.com/google/fonts/archive/main.zip (needs no key) (ttf, woff2). Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0; each family folder has its own license file. Not allowed: OFL fonts cannot be sold by themselves, only bundled with software. Not allowed: Modified OFL fonts cannot use the Reserved Font Name. Rule: Keep the license file with font files you bundle in an app. Rule: Respect Reserved Font Names when you modify a font. License: https://github.com/google/fonts (checked 2026-10-10; details: https://agentgid.com/assets/google-fonts/) Next.js: see https://agentgid.com/assets/google-fonts/agent.md (official example: https://nextjs.org/docs/app/getting-started/fonts) - Fontsource (Fonts). Open-source fonts packaged as individual npm packages for self-hosting. Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions. Connect: npm @fontsource/. Get files: npm install @fontsource/ (static) or @fontsource-variable/, then import the CSS. CDN: https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}. Metadata API: api.fontsource.org/v1/fonts (woff2). Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0. Not allowed: API hard limit is 2500 requests per 10 seconds; constant use at that rate can bring a temporary ban. Rule: Follow each font's own license (OFL, Apache and others). React: see https://agentgid.com/assets/fontsource/agent.md (official example: https://fontsource.org/docs/getting-started/install) ### Backgrounds and gradients - fffuel (Backgrounds, patterns and shapes). Collection of free color tools and SVG generators for gradients, patterns, textures, shapes and backgrounds. Price: free; commercial use OK; no credit needed. Style: gradient, abstract, geometric, colorful. Connect: download from https://www.fffuel.co (no API). Get files: Manual: pick a generator on fffuel.co, customize, then copy SVG code, download SVG, or use the SVG to PNG / base64 tools (svg, png, css). Not allowed: No resale, sublicensing or redistribution of the images Rule: Do not sublicense, resell, share, transfer or otherwise redistribute the Images. License: https://www.fffuel.co/license/ (checked 2026-10-21; details: https://agentgid.com/assets/fffuel/) - SVGBackgrounds.com (Backgrounds, patterns and shapes). Library of SVG backgrounds, patterns, icons and shape tools; a free set of 48 backgrounds plus tools, and a subscription for all graphics. Price: free tier; commercial use OK; credit depends on the item; ship inside your app with conditions; no AI training on its content. Style: geometric, abstract, colorful, gradient. Connect: download from https://www.svgbackgrounds.com (no API). Get files: Manual: download SVG from a set page on svgbackgrounds.com (free sets without account at /set/free-svg-backgrounds-and-patterns/; subscription for the rest) (svg, css). Credit line: Icons by SVGBackgrounds.com (link to the specific set, placed near the graphics or on a credits page) Not allowed: No as-is use, redistribution or resale Not allowed: No AI training Not allowed: Credit required on the free tier Rule: Combine graphics with other original design work; do not use them on their own, as-is. Rule: Free-tier graphics need attribution; subscribers with an active subscription are exempt. Rule: Do not redistribute, resell or use them to train AI models or in automated template tools. License: https://www.svgbackgrounds.com/license/ (checked 2026-10-21; details: https://agentgid.com/assets/svgbackgrounds/) - Haikei (Backgrounds, patterns and shapes). Web app that generates SVG/PNG backgrounds, waves, blobs, gradients and shapes; export as SVG or PNG. Blobmaker and Get Waves are now part of it. Price: free; commercial use OK; no credit needed; no bots or bulk downloading (get files by hand or through the official API, if there is one). Style: abstract, gradient, colorful, geometric. Connect: download from https://haikei.app (no API). Get files: Manual: design at app.haikei.app, then export SVG or PNG (or copy SVG code); no API (svg, png). Not allowed: No similar generator service built from Haikei designs Not allowed: No bots/scraping (terms) Rule: Do not use Haikei designs to run a similar design generator service. Rule: Do not automate access to the site with bots or scrapers. License: https://haikei.app/terms/ (checked 2026-10-21; details: https://agentgid.com/assets/haikei/) ### 3D art - Shapefest (3D and isometric illustrations). Library of 100,000+ ray-traced 3D shape renders in packs (Cinema 4D), as raster images; some packs free at 512 px, full 3000 px packs paid. Price: free tier; commercial use OK. Style: 3d, abstract, geometric, colorful. Connect: download from https://www.shapefest.com (no API). Get files: Manual download of packs from https://www.shapefest.com (free packs 512 px; paid packs 3000 px, one-click download) (png). Not allowed: Assets cannot be sub-licensed, resold, shared, transferred, or otherwise redistributed on its own. Not allowed: UI kits and templates need the Extended License. Rule: Do not resell, share or redistribute assets on their own, even for free. Rule: Use in a product for sale only where the image adds to the core value of the product; UI kits need the Extended License and must not be a library or sub-library. License: https://www.shapefest.com/license-agreement (checked 2026-10-21; details: https://agentgid.com/assets/shapefest/) - Craftwork (3D and isometric illustrations). Marketplace of design packs by independent designers (3D illustrations and icons, UI kits, mockups) with free packs and a subscription, usable via Figma, Blender, PNG and an MCP server. Price: free tier; commercial use OK; no AI training on its content. Style: 3d, colorful, minimal, gradient. Connect: download from https://craftwork.design (no API). Limits: Pro: 1,000 MCP downloads a month. Get files: Download packs from https://craftwork.design (free account; Pro for the full library) or use the Craftwork MCP from Claude Code, Cursor or Codex (figma, png). Not allowed: Commercial License covers individuals and companies up to 20 people; larger companies need the Extended License. Not allowed: Demo files are for previews only. Rule: Do not sell, share or give away the asset files themselves. Rule: Free packs: no resale, redistribution, use in a product you sell, or as a logo/trademark. Rule: Do not train AI models on Craftwork files; products you sell (templates, UI kits) need the Extended License. License: https://craftwork.design/license (checked 2026-10-21; details: https://agentgid.com/assets/craftwork/) ### Animations - Anime.js (UI animation (Lottie, Rive)). MIT JavaScript animation library for CSS, SVG, DOM attributes and JavaScript objects. Price: free; commercial use OK; no credit needed. Connect: npm animejs. Get files: npm i animejs. Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions Rule: Keep the MIT copyright and permission notice in copies. Rule: Install with npm i animejs (the site shows this command). License: https://github.com/juliangarnier/anime/blob/master/LICENSE.md (checked 2026-10-20; details: https://agentgid.com/assets/anime-js/) - Bodymovin (lottie-web) (UI animation (Lottie, Rive)). After Effects extension that exports animations as JSON, plus the lottie-web JavaScript player that renders them in browsers. Price: free; commercial use OK; no credit needed. Connect: npm lottie-web. Get files: npm install lottie-web, or take lottie.js from the build/player folder of the repo, or the cdnjs bodymovin script (js, json). Not allowed: Keep the MIT copyright and permission notice in copies you ship. Not allowed: The license covers the player software; animation JSON files have their own licenses. Rule: Keep the MIT license file and copyright notice with any copies of the library you ship. Rule: Install the player from npm (lottie-web) or download lottie.js from build/player and serve it yourself. Rule: Gzip lottie.js for production, as the README advises. Rule: The MIT license covers the software only; check the license of any animation JSON files you load. License: https://github.com/airbnb/lottie-web/blob/HEAD/LICENSE.md (checked 2026-10-14; details: https://agentgid.com/assets/bodymovin/) ### Gradients - uiGradients (Color palettes and gradients). Community collection of multi-color gradients; all data is in one gradients.json file in the GitHub repo, plus a browsing site. Price: free; commercial use OK; credit required. Style: gradient, colorful. Connect: download from https://uigradients.com (no API). Get files: curl https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json (array of {name, colors[hex]}); or copy CSS from uigradients.com (json, css). Not allowed: Keep the MIT copyright notice Not allowed: No official API; uigradients.com site itself has no terms page Rule: MIT: keep the copyright notice with copies of the gradients data. Rule: There is no official API; read gradients.json from the repo. License: https://github.com/ghosh/uiGradients/blob/master/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/uigradients/) - Radix Colors (Color palettes and gradients). Open-source color system: 12-step accessible scales with alpha, dark mode and P3 variants, shipped as CSS/JS via npm. Price: free; commercial use OK; no credit needed. Connect: npm @radix-ui/colors. Get files: npm install @radix-ui/colors (also yarn/pnpm); CDN files exist for prototyping only; docs: radix-ui.com/colors/docs/overview/installation (css, json). Not allowed: Keep the MIT copyright notice Not allowed: CDN import not recommended in production by the docs Rule: Keep the MIT copyright and permission notice in copies or substantial portions of the software. Rule: Keep the MIT copyright and permission notice. License: https://github.com/radix-ui/colors/blob/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/radix-colors/) HTML/CSS: see https://agentgid.com/assets/radix-colors/agent.md (official example: https://www.radix-ui.com/colors/docs/overview/usage) ### Work shown in frames - Shots (Mockups and device frames). Browser tool that places screenshots into device mockups and exports them as images (and animations/video) with backgrounds and social frame presets. Price: free tier; commercial use OK; no credit needed. Style: realistic, gradient. Connect: download from https://shots.so (no API). Get files: Manual: open shots.so in a browser, add a screenshot, pick a mockup, export (PNG shown in the export panel) (png). Not allowed: Terms ban scraping and bulk-downloading of data Not allowed: Free, Basic and Pro plans have different limits (pricing page not readable) Rule: Terms do not state whether exports may be used commercially; treat commercial use as unconfirmed. Rule: Do not scrape or bulk-download from the service. License: https://shots.so/terms (checked 2026-10-21; details: https://agentgid.com/assets/shots-so/) - Mockuuups Studio (Mockups and device frames). Mockup library (5,300+ device, print and paper mockups) with a web tool, desktop app, design-tool plugins and a render API that places images or URL screenshots into mockups. Price: free tier; commercial use with conditions; ship inside your app with conditions; no AI training on its content. Style: realistic. Connect: API docs https://mockuuups.studio/api/docs/ (API key needed). Limits: 1 render = 1 credit; hi-res and URL screenshots cost 1 extra credit; 50 free credits; HTTP 402 when credits run out. Get files: API: POST https://api.mockuuups.studio/v1/renders with Bearer API key (mockup id, size, contents); or use the web tool, desktop app or Figma/Sketch plugins (png). Not allowed: Free licence is non-commercial and needs credit Not allowed: No resale, redistribution, scraping or AI training Rule: Free plan: personal non-commercial use only, with credit 'Mockup by Mockuuups Studio'. Rule: Paid plan or paid export needed for client, business or commercial work (no credit required). Rule: Do not resell or redistribute mockups or put them in packs/UI kits; no scraping or mass downloading; no AI training. License: https://mockuuups.studio/license (checked 2026-10-21; details: https://agentgid.com/assets/mockuuups-studio/) ### Favicon and social preview image - Satori (Favicons and social preview images). Library that converts HTML/JSX and CSS to SVG (lays out with flexbox); commonly used to generate Open Graph and social card images, PNG via Sharp or Resvg. Price: free; commercial use OK. Connect: npm satori. Get files: npm i satori; call satori(element, {width, height, fonts}) to get an SVG string; convert to PNG with Sharp or Resvg (svg, png). Not allowed: Flexbox and a subset of CSS only Not allowed: You must supply font data Rule: MPL-2.0: modifications to Satori's own files must be shared under MPL; your own code can stay under your terms. Rule: Fonts must be passed as ArrayBuffer/Buffer; text will not render without a font. License: https://raw.githubusercontent.com/vercel/satori/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/satori/) Node.js: see https://agentgid.com/assets/satori/agent.md (official example: https://github.com/vercel/satori) ## Agent Skills (optional, read before installing: skills can run scripts) - npx skills add emilkowalski/skills --skill animate-expo # animate-expo - npx skills add greensock/gsap-skills --skill gsap-core # gsap-core - npx skills add ConardLi/garden-skills --skill motion-showreel # motion-showreel - npx skills add ibelick/ui-skills --skill fixing-motion-performance # fixing-motion-performance - npx skills add tech-leads-club/agent-skills --skill sales-motion-design # sales-motion-design - npx skills add MengTo/Skills --skill optimize-web-animations # optimize-web-animations ## Before you call it done - Add a credits section or file for every source whose license asks for credit. - Check accessibility and contrast with axe-core (e.g. through @playwright/test) and fix what it reports. - Run Lighthouse on the built page; check the layout at phone width (375px) and desktop. - npm install @playwright/test # Playwright (JavaScript) - npm install axe-core # axe-core - npm install lighthouse # Lighthouse Recipe page: https://agentgid.com/assets/recipes/creative-portfolio/ · all recipes: https://agentgid.com/assets/recipes/