build: 8/8v0.92 · #cac750c

SHARP DESIGN

Frontend skill library

Latest candidate: Mirage

author:OSTAVER

model used:DeepSeekV4 Pro

A boutique studio landing page style built on restraint and editorial typography, with persistent light/dark theming and a WebGL noise gradient that quietly drifts toward the cursor.

Architecture

  • Single self-contained HTML document — no build step, no dependencies
  • Simple noise shader to give the page motion but not complexity
  • Optimized SEO

Stack / Framework / Tools

  • HTML5
  • CSS
  • JS - Vanilla
  • Raw WebGL / GLSL

Implementation - how can it be used

  • Boutique Studios
  • Simple portfolios
  • Hair Salons
  • Any website that presents a show/boutique is compatible
Design & ResearchAtelier

Note: This was the initial website idea that the skill was trained on, made by the author.

author:OSTAVER

model used:KIMI K 2.6

An immersive artist portfolio built around a live WebGL fluid shader, a custom two-part cursor, and chromatic scroll-reveal motion — a showcase of expressive, atmospheric frontend.

Architecture

  • Single self-contained HTML document — no build step, no dependencies
  • Full-viewport canvas fixed behind editorial content
  • Graceful fallback that hides the canvas when WebGL is unavailable

Stack / Framework / Tools

  • HTML5
  • CSS
  • JS - Vanilla
  • Raw WebGL / GLSL

Implementation - how can it be used

  • Personal portfolios - frontend developers, graphic designers, artists
  • Mostly sites for showcasing frontend skill
Argon

Note: This was the initial website idea that the skill was trained on, made by the author.

BINARY

author:OSTAVER

model used:DeepSeekV4 Pro

A dark, data-driven fintech portfolio built like a trading terminal — a fixed HUD chrome layer with live market tickers and cursor telemetry, a ring of floating 3D token discs, oversized kinetic typography, and an all-over film-grain finish.

Architecture

  • Single-page site wrapped in a persistent HUD frame — corner brackets, live ticker rail, and real-time cursor / scroll telemetry readouts
  • Ring of floating 3D token discs orbiting the hero, driven by pointer parallax and scroll
  • Film-grain / sensor-noise overlay with monospace data labels for a terminal aesthetic
  • Kinetic oversized wordmark and scroll-reveal typography

Stack / Framework / Tools

  • React
  • Tailwind CSS
  • CurtainsJS
  • WebGL / GLSL

Implementation - how can it be used

  • Fintech, trading, and crypto product landing pages
  • Data-heavy dashboards and design-system showcases
  • Portfolios wanting a terminal / HUD, capital-and-control aesthetic
CAPITAL · DATA · CONTROLBINARY

Note: This was the initial website idea that the skill was trained on, made by the author.

author:OSTAVER

model used:DeepSeekV4 Pro

A full multi-page Astro site, buttery smooth transitions and minimalistic design optimized for Bakeries/Pastries — shop, club, and story pages sharing a persistent sidebar rail, light/dark theming, and animated reveals.

Architecture

  • Nested standalone Astro app
  • Multi-page routing (shop, club, about, privacy, 404) on a shared layout
  • Component-driven sections with a sidebar persisted across routes

Stack / Framework / Tools

  • Astro 7
  • Tailwind CSS 4
  • TypeScript (strict)
  • Animejs

Implementation - how can it be used

  • Coffee shops
  • Bakeries
  • Personal portfolios of UI/UX designers
Comfort

Note: This was the initial website idea that the skill was trained on, made by the author.

author:Irrelevant

model used:GPT 5.5

A high-end, dark elegant marketing website framework — cinematic scroll motion, scroll-growing generative canvas motif, pinned scrollytelling, multi-step reservation wizard (EmailJS), bilingual i18n, and a Firebase CMS admin panel.

Architecture

  • Multi-page vanilla HTML/CSS/JS architecture with zero build-tool overhead
  • Generative canvas background that dynamically grows with scroll
  • Cinematic motion layer (Lenis smooth scroll, GSAP kinetic type, IntersectionObserver reveals)
  • Firebase (Firestore + Auth) backend with admin CMS panel and EmailJS booking wizard

Stack / Framework / Tools

  • Lenis
  • GSAP
  • Firebase
  • EmailJS

Implementation - how can it be used

  • Restaurants, cafes, bakeries, and lounges
  • Boutique hotels, salons, and design studios
  • High-end brand marketing sites with reservation wizards & CMS
Belfort

Note: This was the initial website idea that the skill was trained on, made by the author.

author:OSTAVER

model used:Sonnet 5

A kinetic music-festival landing page — parallax hero layers, a scrubbable headline that reveals the real lineup. Punchy animations to attract the user's attention, colorful but smooth effects.

Architecture

  • Single self-contained standalone HTML document — no build step, no dependencies
  • Section-per-viewport layout paired with a fixed custom scrollbar rail

Stack / Framework / Tools

  • HTML5
  • CSS
  • JS - Vanilla
  • GSAP

Implementation - how can it be used

  • Music portfolios or DJ personal websites
  • Marketing pages for tickets or festivals
  • Anything that correlates to 'colorful'
Stackable

Note: This was the initial website idea that the skill was trained on, made by the author.

MIRAGE Candidate

author:OSTAVER

model used:KIMI K3

A perception-engineering studio landing page — an achromatic, single-file site built around four live Canvas 2D optical illusions you can press-and-hold to expose, kinetic variable-font typography, a moiré hero that tracks the cursor, and pinned horizontal scrollytelling.

Architecture

  • Single standalone HTML file, zero build step, served as a static asset (/skill-mirage.html)
  • Four live Canvas 2D illusions (Fraser spiral, café wall, peripheral drift, Necker cube) with press-and-hold 'reveal the trick' interactions
  • animejs v4 motion layer: loader, kinetic variable-font hero, cursor-tracked moiré, scroll choreography, and count-ups
  • Pinned horizontal 'Method' track + IntersectionObserver reveals, with a full prefers-reduced-motion / no-JS fallback

Stack / Framework / Tools

  • Vanilla JS
  • Canvas 2D
  • animejs v4
  • Variable Fonts

Implementation - how can it be used

  • Studio or agency landing pages with a strong conceptual hook
  • Interactive editorial, exhibition, or campaign microsites
  • Portfolio showcases demonstrating canvas + motion craft
MIRAGE®

Note: This was the initial website idea that the skill was trained on, made by the author.

End of the library — for now

The librarystays open.

Unique and standalone frontend visual systems that will shape your website. Contributions are always welcome, feel free to open an issue or submit a PR.