Mono Designer Portfolio
+6Molten Glass Landingv1.0.0
Use this Skill to build website page.
5.010 downloads0 likes0 saves
$4.99
What do I get when I buy this Skill?Create an animated agency or studio landing page with a living glass-like hero, selected projects, services, and a clear contact invitation. It helps teams convey creative energy without sacrificing readability, making it ideal for portfolio launches, studio positioning, and premium one-pagers.
Picked most often by
Updated Aug 31, 2026
Similar Skills
View all skills
What you get
- A verified single-file template engine with a four-pass WebGL shader: bright swirl, orange glow, fluted-glass refraction, and film grain, plus CSS fallback and reduced-motion support
- A locked style guide covering tokens, the type scale, shader tuning uniforms, pill chrome, text-roll motion, and accessibility rules
- A section library (shader hero, editorial about, project grid, services columns, journal strip, dark CTA footer) with layout specs per breakpoint
- An icon library with ready-to-paste Lucide paths, the bespoke brand-disc and credential-seal marks, and LobeHub usage rules
- A validator script that fails on external requests, leftover placeholders, emoji icons, or a second dark section
Good fit
- Agencies, studios, and freelancers who want a premium 'alive' hero — an animated glass shader, not a static gradient — without adding a build step or dependencies
- Founders and designers who need a portfolio or one-pager that opens from disk, embeds in an iframe, and still degrades gracefully without WebGL
- Teams working inside an existing React/Vue/Svelte/Astro project who want the same visual system generated in their own stack
Not for
- Content-heavy marketing sites with many pages, a CMS, or a blog — this produces one landing page
- Brands that need their own fonts or heavy photography direction; the style is locked to the system font stack and a bright orange-glass world
- Pages that must run without JavaScript entirely — the shader and menu need JS, though the layout itself still renders
Brand IdentityDigital Publications & Web PagesBuild Website PageBuild Landing PageStyle-lockedEditable OutputBright MinimalFluted GlassGrainy GradientShader Lit
About this Skill
Turn one prompt into an agency landing page with a hero that moves. Behind the headline, a live shader renders molten orange light breathing through ribbed glass — the kind of backdrop you usually only see on award-site studios, delivered as a single file you can open from disk.
What you get
- A complete one-page site: animated glass hero, pill navigation, an editorial about section, project cards, and a dark closing footer with a giant watermark
- Buttons with a signature hover — labels roll up a line while the arrow turns
- Project cards that grow a "View case study" pill when you hover, with an optional dark motion-reel variant of the shader
- One self-contained file: no build step, no hosting dependencies, nothing loaded from the network
- On phones, a proper bottom-sheet menu; without WebGL, a clean gradient stands in
How to use it
- Tell it your studio or product name and the one sentence you want to lead with
- Add two projects and a line about what each achieved — or let it draft everything
- Open the file in your browser; hand it your photos or generated art to embed when you're ready
Working inside a React, Vue, Svelte, or Astro project? It builds the same page in your framework's own style instead of a single file.
What you need before you start
- You bring
- Studio or brand name, a one-sentence positioning statement, and 2 flagship projects with a one-line result each
- Last tested
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…