Light-UI-UX website DM Sans / Noto Sans SC: SIL Open Font License 1.1. https://github.com/google/fonts/tree/main/ofl/dmsans https://github.com/google/fonts/tree/main/ofl/notosanssc Icons: Tabler Icons and Bootstrap Icons (MIT), via the Light-UI-UX local arsenal. https://github.com/tabler/tabler-icons https://github.com/twbs/icons Brand marks: Windsurf and Cursor. Their marks remain the property of their respective owners and identify tool compatibility. Windsurf: https://windsurf.com/brand Source: https://exafunction.github.io/public/brand/windsurf-black-symbol.svg Cursor: https://cursor.com/brand Source: https://ptht05hbb1ssoooe.public.blob.vercel-storage.com/assets/brand/brand-logo-3.svg (standalone 2D symbol, extracted without changing its path or proportions) GSAP: Standard license. https://gsap.com/community/standard-license/ # Third-party notices Original Light-UI-UX code and documentation are licensed under MIT. Third-party resources retain their own copyright and license terms; inclusion in the local database does not relicense them. ## Components The component index contains 1,140 entries: 876 with bundled source and 264 with metadata and an upstream link only. Bundled components retain license files inside their source maps where available. Additional full license texts are in [licenses/components](licenses/components). | Source | Bundled entries | License text | | --- | ---: | --- | | BundUI | 213 | [MIT](licenses/components/bundui.txt) | | Animation Micro-Interactions | 176 | [MIT](licenses/components/amicro.txt) | | Animata | 154 | [MIT](licenses/components/animata.txt) | | Cult UI | 137 | [MIT](licenses/components/cult-ui.txt) | | GSAP CodePen examples | 61 | [Example license](licenses/components/gsap.txt) | | Bencho | 49 | [MIT](licenses/components/bencho.txt) | | Open UI libraries | 49 | [MIT and dependency notices](licenses/components/libraries.txt) | | Beautiful UI | 21 | [MIT](licenses/components/beautifului.txt) | | Orb / shader components | 13 | [MIT](licenses/components/orb.txt) | | Public CodePen examples | 2 | [Example license](licenses/components/codepen.txt) | | Liquid Glass | 1 | [MIT](licenses/components/liquid-glass.txt) | Reference-only entries do not bundle component source: - **React Bits (216):** [upstream terms](https://github.com/DavidHDev/react-bits/blob/main/LICENSE.md) restrict redistribution of the components themselves. The index retains names, search metadata, and official source URLs. - **RareUI (25):** indexed by metadata and upstream URL; component redistribution is not included. - **StringTune tutorials (23):** the package's MIT license does not establish a separate license for downloaded tutorial pages, so those pages are linked rather than bundled. The database excludes AGPL/GPL components, GSAP Standard License example bundles, proprietary Unicorn Studio embeds, and Nucleo UI SVGs. Code examples can still require separately installed libraries, fonts, or media under their own terms. A CodePen example's license does not relicense GSAP itself. ## Icons The database contains 17,130 logical icon entries and 33,253 SVG variants. Full license texts: | Library | License | | --- | --- | | Tabler Icons — Paweł Kuna | [MIT](licenses/icons/tabler.txt) | | Hugeicons Free | [MIT](licenses/icons/hugeicons.txt) | | Phosphor Icons | [MIT](licenses/icons/phosphor.txt) | | Bootstrap Icons — The Bootstrap Authors | [MIT](licenses/icons/bootstrap.txt) | | Iconoir — Luca Burgio | [MIT](licenses/icons/iconoir.txt) | | Heroicons — Tailwind Labs | [MIT](licenses/icons/heroicons.txt) | | Solar — 480 Design | [CC BY 4.0](licenses/icons/solar.txt) | Solar attribution: [480 Design](https://www.figma.com/@480design), [original collection](https://www.figma.com/community/file/1166831539721848736), [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). The archived SVGs normalize IDs and make ink colors configurable; vector geometry is retained. Preserve this attribution when redistributing Solar icons. ## Design datasets and references | Source | Included material | License | | --- | --- | --- | | Impeccable | Design guidance | [Apache-2.0](licenses/methods/impeccable-LICENSE), [notice](licenses/methods/impeccable-NOTICE.md) | | Open-Design | Shader templates, brand systems, motion and layout references | [Apache-2.0](licenses/methods/open-design-LICENSE) | | Taste-Skill | Blueprints, palettes, font pairings, motion recipes | [MIT](licenses/methods/taste-skill-LICENSE) | | UI/UX Pro Max | Industry mappings and stack guidance | [MIT](licenses/methods/ui-ux-pro-max-LICENSE) | | GSAP Skills | Motion guidance | [MIT](licenses/methods/gsap-skills-LICENSE) | | AI Design Skills | Design workflow references | [MIT](licenses/methods/ai-design-skills-LICENSE) | | IP-as-Logo | Brand design methodology | [MIT](licenses/methods/ip-as-logo-LICENSE) | Additional methodology references include Interface Details, Emil Kowalski's design engineering guidance, Apple fluid interfaces, mobile app design guidance, and shadcn/ui. Website benchmark records retain source URLs and structured measurements such as colors, type scales, spacing, and radii; these references do not imply affiliation or endorsement. ## Showcase RIFT, NOCT, Meltday, and Veylo are fictional demonstration projects built with Light-UI-UX. Screenshots and original briefs are in [docs](docs); screenshots are examples of output rather than part of the reusable component library. The QR code assets in the README are supplied by the project author and reused from [Light-skills](https://github.com/Light0305/Light-skills). --- rift --- # RIFT — asset provenance RIFT is a fictional brand. All product names, descriptions and campaign imagery are part of the concept. ## Original photography Created with the built-in imagegen tool. Final optimized photographs are in `public/images/`. Original generated PNGs are retained in `.light-ui/originals/` locally. No stock-photo downloads or external image hotlinks are used. Original prompts follow. ### Campaign Use case: photorealistic-natural. Asset: one premium horizontal editorial fashion campaign photograph for fictional independent running and lifestyle label RIFT, OFF TRACK collection. 1536x1024 landscape. Scene: a raw pale concrete urban athletics court outside a brutalist stadium, overcast bright grey sky, restrained charcoal and bone, a distant vermilion-red running-track stripe. Two stylish young adult athletes. Foreground on right: androgynous Black male fashion runner with short hair in a vivid vermilion-red lightweight zip technical shell jacket, high collar, simple tiny black RIFT wordmark on chest, black loose running shorts. Midground on left: East Asian female athlete with slick dark hair wearing a bone/off-white lightweight shell with charcoal panels, dark shorts, silver running shoes. Both full-body editorial poses, standing and leaning at unexpected diagonals as if caught between motion and stillness, calm confident expressions, fashion not gym. Wide-angle lower viewpoint, athletes occupy most of the middle and right frame, architectural horizontal concrete seams. Beautiful crisp nylon folds, premium tactile fabric, realistic human anatomy. Medium-format campaign photography, 35mm film grain, hard on-camera flash mixed with cool daylight, sophisticated independent fashion magazine aesthetic. Candid, unposed energy. Clean architectural background, no busy crowd, no other brands, no graphic overlays, no watermarks. Actual photo only, not a webpage or collage. Need natural colors, no sepia or gradients. ### shell Use case: product-mockup. Premium tactile e-commerce studio photograph for independent running fashion brand RIFT, Off Track collection. Square 1024x1024 composition, one garment only, centered, fills 80 percent of image, off-white bone studio cyclorama #e8e6df. Straight-on front view, subtle natural folds and soft contact shadow, clean luxury catalog, crisp ripstop nylon textile detail, professional softbox lighting. No human, no hanger, no graphic overlays, no watermarks. A vivid vermilion-red lightweight technical running shell jacket, long sleeves, stand-up collar, full black center zipper, two invisible angled pockets, softly gathered elastic cuffs and hem. Tiny plain black RIFT lettering on left chest. Loose relaxed silhouette. Ghost-mannequin volume, sleeves angled slightly down. Match the red jacket from a modern editorial running campaign. Red hex #e63724. ### tee Use case: product-mockup. Premium tactile e-commerce studio photograph for independent running fashion brand RIFT, Off Track collection. Square 1024x1024 composition, one garment only, centered, fills 80 percent of image, off-white bone studio cyclorama #e8e6df. Straight-on front view, subtle natural folds and soft contact shadow, clean luxury catalog, crisp ripstop nylon textile detail, professional softbox lighting. No human, no hanger, no graphic overlays, no watermarks. A bone/off-white technical performance short-sleeve T-shirt, slightly boxy relaxed fit, crew neckline, raglan seams, small black RIFT lettering at left chest, discrete black diagonal split seam side panels. Smooth matte technical jersey fabric with realistic fabric folds and construction. Ghost mannequin volume. Minimal distinctive premium unisex sports fashion. ### shorts Use case: product-mockup. Premium tactile e-commerce studio photograph for independent running fashion brand RIFT, Off Track collection. Square 1024x1024 composition, one garment only, centered, fills 80 percent of image, off-white bone studio cyclorama #e8e6df. Straight-on front view, subtle natural folds and soft contact shadow, clean luxury catalog, crisp ripstop nylon textile detail, professional softbox lighting. No human, no hanger, no graphic overlays, no watermarks. A pair of graphite-black loose lightweight technical running shorts, mid-thigh length, elastic gathered waistband with black drawstring, curved hem with small side slits, two useful side pockets, tiny bone/off-white RIFT lettering on lower left leg. Matte soft ripstop nylon. Relaxed unisex fit, beautiful detailed subtle light and shadow. ### shellBone Reference: shell-red.png Edit this exact product catalog photograph. Change only the red jacket fabric to neutral bone/off-white #d9d6cb. Keep exactly the same jacket design, black zipper, material weave, black RIFT wordmark, garment shape, realistic creases, framing, lighting and off-white studio background. This is an alternate colorway of the same garment. Actual premium product photograph, no extra text. ### teeInk Reference: tee-bone.png Edit this exact product catalog photograph. Change only the bone T-shirt fabric to graphite-black #30302e and its small RIFT chest lettering to off-white. Keep exactly the same crewneck T-shirt design, fabric, drape, sleeve shape, creases, framing, lighting and bone studio background. Alternate color of the same garment. No extra graphics. ### shortsBone Reference: shorts-ink.png Edit this exact product catalog photograph. Change only the graphite shorts fabric to bone/off-white #d9d6cb and the small RIFT lettering on leg to black. Keep black drawstring and exactly the same shorts design, nylon material, shape, creases, framing, lighting and background. This is an alternate colorway of the same garment. No extra text. ### lookbook Reference: campaign.png Use this photo as character and garment reference for a NEW photograph in the SAME RIFT OFF TRACK campaign. Create a sophisticated vertical editorial photograph, 1024x1536 portrait. The same young East Asian female fashion runner with black slicked hair is standing in a relaxed, unconventional sideways athletic pose on raw grey concrete stadium steps, one foot raised on a higher step, leaning back against a wall, head turned to camera. She wears a bone/off-white lightweight technical zip shell with black small side panels, a bone technical T-shirt, black loose running shorts, white socks and silver runners, matching the reference campaign. Full body including shoes visible. Strong top sunlight, modern independent fashion magazine, light fine 35mm film grain, cool neutral concrete and warm bone fabrics, authentic natural skin, crisp textures. Composition subject occupies center, architectural shadows and stair diagonals add tension. No overlay text, no watermark. Not a collage or webpage. Beautiful raw, art-directed fashion photo. ## Type and icons ### City-life editorial Use case: photorealistic-natural. Create a NEW vertical 1024x1536 premium editorial photograph for fictional independent running/lifestyle brand RIFT, using reference ONLY for the same young adult Black male model and the exact red shell jacket/black shorts clothing. This new scene is AFTER the run, in everyday city life. The same man is walking casually along a quiet concrete downtown sidewalk beside a dark steel-and-glass corner cafe, carrying a small plain off-white paper coffee cup in one hand. Three-quarter full body, silver-grey trainers, white socks, graphite black relaxed shorts and vivid vermilion-red lightweight RIFT shell zipped halfway at stand collar, same tiny black RIFT lettering. Authentic candid urban fashion photography, body relaxed in mid-step, looking away from camera. Frame the man toward the left center, let long diagonal afternoon shadows cross the raw pavement, interesting geometric architecture and a single softly blurred urban bike wheel in background. Bone concrete, graphite storefront, warm natural light, one vivid red garment, no other strong colors. High-end independent fashion editorial, realistic skin and premium nylon fabric, 35mm film grain and sunlight. No readable shop signage, no other brand names, no text overlays or watermarks. A different city-life story moment from the athletics stadium reference, not a collage. Barlow Condensed (800) and DM Sans (variable 400–700), self-hosted WOFF2 from Google Fonts. Both are distributed under the SIL Open Font License. SVG icon paths adapted from Tabler, MIT, retrieved via the local light-ui-ux arsenal. Favicon is a custom vector R. No third-party commerce is connected. ## Local reference anchors - `ref-fa157687-ee4` — SSENSE: sparse commerce, editorial sequencing, sharp corners. Used as a structural reference, not copied. - `ref-ab1b113a-ed2` — Look Inc: image-to-type rhythm. - `ref-2f94c1f0-cd2` — arte*: contrasting exploratory direction. - `bundui-drawer-01` — drawer interaction reference; implemented independently using native HTML dialog. - `promax-motion-6`, `promax-motion-13` — scrub-linked photography and typographic motion. --- noct --- # Third-party notices ## Tabler Icons Copyright (c) 2020–2026 Paweł Kuna. MIT License. https://github.com/tabler/tabler-icons ## Animata Copyright (c) Animata. MIT License. https://github.com/codse/animata Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ## Manrope Copyright 2018 The Manrope Project Authors. SIL Open Font License 1.1. See `assets/OFL-Manrope.txt`. --- veylo --- # Assets and third-party notices ## Photography Local copies of fixed Unsplash photographs are used as illustrative content inside fictional product templates. The expert portrait illustrates an example conversation and does not identify an actual Veylo employee. - `public/assets/interior.jpg`: [source image](https://images.unsplash.com/photo-1600607687939-ce8a6c25118c) - `public/assets/mountains.jpg`: [source image](https://images.unsplash.com/photo-1464822759023-fed622ff2c3b) - `public/assets/lamp.jpg`: [source image](https://images.unsplash.com/photo-1507473885765-e6ed057f782c) - `public/assets/expert.jpg`: [source image](https://images.unsplash.com/photo-1506794778202-cad84cf45f1d) [Unsplash license](https://unsplash.com/license). ## Typography DM Sans, obtained from Google Fonts and served locally. Copyright 2014 The DM Sans Project Authors. DM Sans is distributed under the SIL Open Font License 1.1. The complete upstream notice is preserved in `public/assets/DM-Sans-OFL.txt`. Georgia is used through the device's existing system font for two miniature template headings; it is not distributed with the project. ## Icons Interface icons are compact adaptations of Tabler Icons SVG paths extracted from the project's local `light-arsenal.db`, including arrow-up-right, arrow-up, arrow-right, arrow-left, check, plus, layout, world, device-mobile, chevron-down, menu, and x. MIT License Copyright (c) 2020–2026 Paweł Kuna Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ## Runtime libraries Vite and GSAP are installed from npm. Their license notices are included in the installed packages and package metadata. No extracted third-party component source is shipped; local component references informed independently authored behavior. --- meltday --- # Meltday A responsive, English-language website for a fictional small-batch ice cream brand. ## Preview locally From this directory, run `python -m http.server 5173 --directory dist`, then open http://localhost:5173. No dependencies or build step are required. `dist/` is the complete website. ## Included - Six-flavor horizontal menu with seasonal filter and accessible carousel controls. - Live cup/cone, single/double scoop builder, per-scoop flavor choices, allergen summary and itemized pricing rules. - Saved combinations in local storage, confirmation dialog and downloadable PNG scoop card. - Ingredient story, disclosure controls, fictional store details and visit dialog. - Responsive layouts, keyboard controls, dialog focus handling, reduced-motion support and scroll-linked product movement. - A compact sticky preview and live total remain visible while editing on mobile. ## Pricing (fictional, USD) Single $4.50; double $6.50; waffle cone +$0.75. Pistachio, peach and coffee add $0.50 per scoop. Default pistachio + strawberry double cone costs $7.75. ## Assets and design sources Photography generated with the built-in image generator for this project and optimized to WebP. Original PNGs are retained in `source-assets` for source provenance; the browser uses WebP. Two locally hosted Google Fonts: Lilita One and DM Sans (SIL Open Font License). UI icons adapted from Tabler, MIT, retrieved through the project’s local arsenal. The project follows `../../SKILL.md` (light-ui-ux). Selected direction: The Happy Scoop. Benchmark anchor: Foodnoms `ref-1e7dae3b-cb3`, used for rounded controls and fresh color relationships; Meltday has its own layout, typography and palette. `qa/benchmark-reference.css` records the benchmark export and is not loaded into the website. Complete generation prompts are recorded in `source-assets/PROMPTS.md`; third-party font and icon licenses accompany the assets. ## Validation - JavaScript syntax check passed. - Project inspection: 0 errors, 0 warnings. Two static advisories refer to styles in the external CSS; browser checks confirm themed selection and tabular prices are present. - 16 core behavior checks passed, including pricing, separate flavor choices, allergen guidance, seasonal filters, saving, dialogs and restoring after reload. - Responsive geometry checked at 320, 390, 768 and 1440px: no document overflow or broken loaded images. - Mobile menu, 44px menu controls, sticky preview at 77px, synchronized preview/price, and actual PNG download verified in the browser. - Independent visual review: **9.1/10, SHIP** after the targeted refinement pass. Screenshot and browser evidence is retained locally in `qa/` (excluded from hosted source). Keyboard and reduced-motion behavior are supported in implementation. A complete assistive-technology audit was not performed. This is a fictional brand. The site places no orders, sends no form submissions, and has no real storefront.