CSS texture implementations — 7 texture types

[ihateusernamesfuckthis]

Phase 2: Texture System — Item 8

Implement CSS-based textures for all 7 material types defined in the design system. These textures are the most distinctive visual aspect of the site.

Textures to implement

1. Paper Grain (base layer — already done in Phase 1, verify/enhance)

• SVG fractal noise overlay at 4% opacity
• Applied globally via body::after

2. Chrome / Metal Gradient

• Multi-stop linear gradient mimicking chrome reflections
• Animated slow gradient shift (background-position animation)
• CSS class: .chrome-surface

3. Braille Dot Pattern

• Radial gradient dot pattern: radial-gradient(circle, var(--grey-300) 2px, transparent 2px)
• Background-size: 16px 20px
• Optional embossed effect via SVG with drop-shadow filter
• CSS class: .braille-dots

4. Warm Light Gradient

• Radial gradient: ellipse at 30% 20%, warm tone rgba(255, 248, 235, 0.6) fading to transparent
• CSS class: .warm-light

5. Woven Pattern

• Photographic/scanned background with background-size: cover
• Applied via ::before pseudo-element at ~15% opacity
• Gradient mask to fade edges: mask-image: linear-gradient(to bottom, black 40%, transparent 100%)

6. Marble Veins

• Photographic background, ~10% opacity
• Same mask technique as woven
• High contrast between white base and grey veining

7. Clay Surface

• Photographic background, ~12% opacity
• Same mask technique as woven
• Warm, earthy, porous feel

Texture Rules (Section 3.2)

1. Never more than two textures visible simultaneously
2. Textures fade (no hard edges) — use opacity transitions, gradient masks, blur
3. Textures support content, never compete with it
4. Minimum 80px whitespace between texture elements

References

• DESIGN-SPEC.md §3.1, §3.3