Vibe Materials

A material recipe library for AI-generated websites. Start with a broad map, then copy the strongest finished recipes.

Browse ready recipes Explore the map

106: material slots
12: ready recipes
5: languages

A periodic table for web materials

Ready tiles include code and prompts. In-progress tiles are clickable, but intentionally do not ship fake snippets.

ReadyLgLiquid GlassDigital / Web UI In ProgressGmGlassmorphismDigital / Web UI ReadyFfFrosted FilmDigital / Web UI In ProgressNmNeumorphismDigital / Web UI In ProgressCyClaymorphismDigital / Web UI ReadyAuAurora GradientDigital / Web UI ReadyNgNoise GradientDigital / Web UI ReadyHgHolographicDigital / Web UI ReadyCrChrome UIDigital / Web UI ReadyDnDark NeonDigital / Web UI In ProgressSpSoft PlasticDigital / Web UI ReadyTgTerminal GreenDigital / Web UI In ProgressGrGlitch RedDigital / Web UI In ProgressBpBento PaperDigital / Web UI In ProgressMgMesh GradientDigital / Web UI In ProgressVgVapor GlassDigital / Web UI In ProgressAcAcid ChromeDigital / Web UI In ProgressDbDuotone BlurDigital / Web UI In ProgressNeNeon GlassDigital / Web UI In ProgressCfCyber FrostDigital / Web UI In ProgressGhGradient MeshDigital / Web UI In ProgressSsShadow StackDigital / Web UI PlannedSkSkeuomorphic PanelDigital / Web UI PlannedTiTranslucent InkDigital / Web UI In ProgressPgPaper GrainSurface / Texture In ProgressVlVellumSurface / Texture In ProgressCwCanvas WeaveSurface / Texture In ProgressLnLinenSurface / Texture In ProgressPcPaper CutSurface / Texture In ProgressIbInk BleedSurface / Texture In ProgressRiRisographSurface / Texture In ProgressHtHalftoneSurface / Texture In ProgressRmRubber MatteSurface / Texture In ProgressEnEnamelSurface / Texture PlannedCkCorkSurface / Texture PlannedFtFeltSurface / Texture PlannedCdChalk DustSurface / Texture PlannedTrTerrazzoSurface / Texture PlannedVvVelvetSurface / Texture PlannedWpWet PaintSurface / Texture ReadyGoGoldPhysical / Industrial In ProgressSiSilverPhysical / Industrial In ProgressCuCopperPhysical / Industrial In ProgressTnTitaniumPhysical / Industrial In ProgressBmBrushed MetalPhysical / Industrial ReadyCxCarbon FiberPhysical / Industrial In ProgressMbMarblePhysical / Industrial In ProgressGtGranitePhysical / Industrial In ProgressPlPearlPhysical / Industrial In ProgressCeCeramicPhysical / Industrial In ProgressAyAcrylicPhysical / Industrial In ProgressFpFrosted PlasticPhysical / Industrial PlannedRbRubberPhysical / Industrial PlannedLhLeatherPhysical / Industrial PlannedDeDenimPhysical / Industrial PlannedCoConcretePhysical / Industrial ReadyRpRPG Gold ButtonGame UI In ProgressPoPotion GlassGame UI ReadyCgCrystal GemGame UI In ProgressLcLava CoreGame UI In ProgressIcIce ButtonGame UI In ProgressTsToxic SlimeGame UI In ProgressStStone TabletGame UI In ProgressWsWooden SignGame UI In ProgressPaPixel ArcadeGame UI In ProgressMrMagic RuneGame UI In ProgressMmMecha MetalGame UI PlannedMoMana OrbGame UI PlannedDsDragon ScaleGame UI PlannedQpQuest ParchmentGame UI PlannedClCyber LootGame UI PlannedIsInventory SlotGame UI PlannedHbHealth Bar GelGame UI PlannedScSpellbook CoverGame UI In ProgressLbLens BlurOptical / Light In ProgressRfRefraction FieldOptical / Light In ProgressBhBloom HaloOptical / Light In ProgressCtCausticsOptical / Light In ProgressIfIridescent FilmOptical / Light In ProgressPsPrism SplitOptical / Light In ProgressSeSpecular EdgeOptical / Light In ProgressFoSpotlight FalloffOptical / Light PlannedGsGlass ShadowOptical / Light PlannedVmVolumetric MistOptical / Light PlannedLaLaser GlowOptical / Light PlannedDfDepth FogOptical / Light PlannedMiMoiréOptical / Light PlannedDiDiffractionOptical / Light PlannedLlLight LeakOptical / Light PlannedCaChromatic AberrationOptical / Light In ProgressHdHUD GlassCyber / Interface In ProgressSySci-fi PanelCyber / Interface In ProgressDgData GridCyber / Interface In ProgressCsCRT ScanlineCyber / Interface In ProgressMxMatrix RainCyber / Interface In ProgressWaWarning StripeCyber / Interface In ProgressBgBlueprint GridCyber / Interface In ProgressCcCommand ConsoleCyber / Interface PlannedRsRadar SweepCyber / Interface PlannedCiCircuit BoardCyber / Interface PlannedLzLaser EdgeCyber / Interface PlannedBiBiometric GlassCyber / Interface PlannedWmWireframe MeshCyber / Interface PlannedTpTelemetry PanelCyber / Interface PlannedSbScan BeamCyber / Interface PlannedSmStealth MatteCyber / Interface

First-wave recipes

The launch set focuses on digital web materials while keeping enough range to show the long-term system.

Digital / Web UI

Liquid Glass

A translucent, refractive glass surface with soft blur, bright edge highlights, and a small amount of depth.

Digital / Web UI

Frosted Film

A calm, diffused translucent layer that reveals color underneath without turning into clear glass.

Digital / Web UI

Aurora Gradient

A soft atmospheric gradient inspired by aurora light, useful for depth without heavy illustration.

Digital / Web UI

Noise Gradient

A gradient that uses subtle grain to remove sterile smoothness and make AI pages feel more designed.

Digital / Web UI

Holographic

An iridescent foil-like material with shifting color bands, pearly highlights, and a thin-film feeling.

Digital / Web UI

Chrome UI

A hard reflective metal UI surface with bright bands, dark cuts, and a polished industrial feel.

Digital / Web UI

Dark Neon

A dark interface material with disciplined neon edges, strong contrast, and a technical nighttime mood.

Digital / Web UI

Terminal Green

A terminal-inspired green phosphor material for developer, AI agent, and system-monitoring interfaces.

Physical / Industrial

Gold

A warm metallic material with high contrast bands, premium shine, and a heavy sense of value.

Physical / Industrial

Carbon Fiber

A dark technical weave material that gives interfaces a performance, hardware, or engineering tone.

RPG Gold Button

A fantasy game button material with bevels, warm metal, inner depth, and a reward-like click target.

Crystal Gem

A faceted gem material with angular cuts, inner glow, sharp highlights, and a collectible game-object feel.

Material families

The map is organized around how people actually describe interface texture: surface, light, physicality, game language, and cyber UI.

24

Digital / Web UI

8 Ready / 24

16

Surface / Texture

0 Ready / 16

16

Optical / Light

0 Ready / 16

16

Physical / Industrial

2 Ready / 16

18

Game UI

2 Ready / 18

16

Cyber / Interface

0 Ready / 16

Use it with AI coding tools

Copy a material prompt into Cursor, Codex, Lovable, Bolt, or Claude Code, then paste the CSS or React sample as a reference implementation.

01AI Prompt

02CSS

03React example