# Morning Blinds Hero

A full-bleed hero lit by morning light through window blinds: soft-edged bands across a plaster wall with a gentle penumbra, a window bar, a faint warm bounce off the floor, and shadows that shift slightly. Pure CSS.

Block · With a Pass · https://tactileui.dev/blocks/morning-blinds-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

Blind shadow bands, Penumbra layer, Window bar shadow, Floor bounce, Static film grain, Css transform drift, Colour tuning variables, Container query layout, Pause off screen

## Usage notes

The opening section of a studio, architect, hospitality or editorial site that wants calm daylight behind its words. Light first; the graphite finish turns the same window into a lamp on a dark wall. Nothing runs but CSS transforms, and the light takes your brand colour.

## 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. Calder & Pike and all copy are invented. No image file: the picture is CSS.