# Fluted Glass Hero

A full-bleed hero over a wall of ribbed glass with one warm lamp drifting slowly behind it. Every rib refracts the lamp into its own slice of light, with a lit edge, a faint caustic and a soft colour at the hot core.

Block · With a Pass · https://tactileui.dev/blocks/fluted-glass-hero

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Ribbed glass refraction, Single lamp drift, Rib edge and caustic, Static film grain, Css fallback picture, Colour tuning variables, Container query layout, Pause off screen

## Usage notes

The opening section of a lighting, audio or hardware maker, or any product that wants one warm, quiet picture behind its headline. The glass is a real shader, the words are ordinary HTML in a slot, and the light takes your brand colour: set one custom property and the lamp is yours, with the words still readable.

## Options

| Option | Type | Description |
| - | - | - |
| eyebrow | text | Printed small above the headline. Empty leaves it out. |
| title | text | Headline |
| lead | text | Sentence |
| cta | text | Empty leaves it out. |
| ctaHref | text | Contrast key link |
| cta2 | text | Empty leaves it out. |
| cta2Href | text | Second key link |
| heading | enum | h1 when this is the top of the page. |
| tint | text | Empty is the house default. |
| tone | text |  |
| toneStrength | number | At 0 the greys are plain. |
| intensity | number |  |
| motion | boolean | Off holds one still picture, as reduced motion does. |
| finish | enum | Auto takes the page’s own finish, then the visitor’s system. |

## Methods

- refresh
- update
- destroy

## States

1. **At rest**: 
2. **Tinted**: 
3. **Toned**: 
4. **Hover and focus**: Keys brighten on hover and sink by their skirt when pressed.
5. **Finishes**: Aluminium (light) or graphite (dark), by the finish option, the page’s data-finish or tone, its colour scheme, or the visitor’s system.
6. **Tablet**: 
7. **Phone**: 
8. **Reduced motion**: The animation stops and one still picture is drawn. The same happens with the motion option off.
9. **Off screen or hidden**: Everything pauses when the section is off screen or the tab is hidden, and resumes when it is back.
10. **No hardware graphics**: On a browser that draws with the CPU the picture holds still: one frame, no loop.

## How it works

Original composition. Orrery Lighting and all copy are invented. No image file: the picture is CSS, one small WebGL shader.