- Model
- hero-furnace-room
- Tier
- Headline
- Effort
- SML (effort M)
- Lens
- Homepage
- Sheet
- 03.1
Lights off, heat on: a furnace-room hero with the UPTON sign in frame
Kolene's dark split hero, your line photo at full strength with the UPTON sign in frame, and a headline that quenches.
Area Homepage hero
- /
- Wow 5/5
- Impact 5/5
- Brand fit 5/5
03.1.1Live demo
Est. 1937 · A Kolene company
Molten salt, engineered since 1937.
Molten salt bath, batch, pit, and specialty furnaces designed and manufactured in Roseville, Michigan.
The blackout is only how this demo switches views. The proposed page load is just the H1 rise and quench; the photo is static from the first frame.
03.1.2Problem
The only photo of real Upton equipment sits at opacity .58 under a white veil (98%→30%). object-position 100% 50% crops out the UPTON sign on the gantry. At 390px the photo is almost invisible. The headline says 'for over 80 years' (it's 89). Nothing moves on load, and Kolene's own homepage already uses KDL's .kdl-hero--dark, so Upton is the pale one in the family.
03.1.3Concept
The hero switches to KDL's dark hero as a split panel. Copy sits on solid steel with a faint grid, and Upton's line photo runs at full strength from about 36% width to the right edge, anchored so the hanging UPTON sign lands clear of the copy. On load the H1 rises, and the emphasized phrase arrives with a copper-yellow bloom that cools to cherry over about 900ms, like a part being quenched. The eyebrow becomes a Lilex readout: 'EST. 1937 · A KOLENE COMPANY'. Suggested headline, echoing Kolene: 'Molten salt, engineered since 1937.' Optional power-up: a 'thermal lens' mode where the photo is pre-baked in thermal-camera tones and a 280px true-color lens follows the pointer, parked on the UPTON sign at rest, with a 'Show true color' button for keyboard and touch. On phones the photo sits full-bleed 4:3 above the copy with a 6px heat edge.
03.1.4Specification
Why Upton
It's KDL's own sitewide hero, so Upton finally reads as Kolene's sibling. Engineers trust real equipment with the maker's name on it, and that name is already in the photo. Dark with a glow is also what the equipment looks like when it's running.
Today on upton.test
Build notes
Scope it under .hero--dark, emitted by hero.php and switchable with a new 'upton_hero_variant' Customizer setting so the light hero is a one-click rollback. ≥900px: .hero__background{inset:0 0 0 36%}, .hero__image{opacity:1;object-position:0% 8%}, overlay 90deg from solid surface-inverse to 10% at the right; min-height min(78vh,720px). <900px: photo block aspect-ratio 4/3 above the copy, veil removed. Headline <strong>: an upton-quench keyframe from copper-500 plus a text-shadow bloom to accent-500, inside the no-preference guard; the glyph color never drops below large-text contrast (copper-300 is 8.6:1 on gray-800). Keep the image at its final opacity from frame 1 (it's the LCP). Thermal lens: pre-bake hero-thermal-{960,1280,1920}.jpg as static assets (no live SVG filter on the LCP image); the true-color layer loads lazy/low priority and is revealed with mask-image radial-gradient at --lx/--ly, set by a roughly 35-line hero-lens.js on (pointer:fine). Update both default-headline literals (hero.php:58, functions.php:138). Add forced-colors and print resets.
Risks
The film-scan grain shows at full strength, so apply a gentle contrast curve. Leading with 'Molten salt' means the subhead must also name batch, pit and specialty. Label the thermal view 'Stylized' so nobody mistakes it for real thermography. Keep dark bands spaced so the homepage doesn't become one black slab.
What Upton must supply
Upton to approve the headline rewrite. Optional: a higher-resolution scan of the line photo, or real thermal-camera footage.
What we checked
The split layout was tested live at three widths with the existing single image. LCP was measured as the image, not the H1. Kolene's dark hero was confirmed. The thermal lens is pre-baked because live SVG filters on a 1920px LCP image are costly.
Code, data and files
applications-grid.css:10-56template-parts/hero.php:58functions.php:138- LCP = img.hero__image
Checked on the live site
- The split hero injected as CSS into the live homepage at 1440, 1024 and 390
- Plus 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from
hero-lights-out-molten-typeLights off, heat on: a dark split hero with the UPTON sign in frame (Homepage lens)art-thermal-lens-heroThermal lens: look at the line the way the process sees it (Art direction lens)motion-hero-live-salt-bathBig swing: a hero that comes out of the furnace (Motion lens)mobile-hero-sightglassSight Glass Hero + Equipment Data Plate (Mobile lens)






Internally Heated Salt Bath Furnaces
Pit Type Furnaces
Bell Furnaces
Box Furnaces
Belt Furnaces
Car Bottom Furnaces
























































