What it looks like
Imagine a ceiling lamp switching on in a dark room. The section has a navy, almost black backdrop and fills the screen height. At the top, a thin line of cyan light glows, and right below it a soft halo of the same color spreads downward, lighting the headline you place inside the component. On load, after half a second, the line and the glow widen to twice their size in a little under a second and then stay still. There is no continuous motion and no reaction to the mouse.
You may be looking for this if you asked for something like
- a lamp light effect above my site headline
- that blue neon line with light falling onto the text
- a headline with a light switching on above it to open a dark section
- a dark hero with a spotlight at the top, without 3D
- a spotlight-style glow on the product name for a launch
- a glowing lamp light to highlight one strong sentence
Also known as
- headline spotlight glow
- spotlight header
- glowing line
- neon light effect
- light beam header
- lamp section
When to use
- An impact section title, such as a launch or an announcement
- A dark hero opener on a tech or product site
- An event or manifesto page with one short, strong line
- Projects that need a visual effect without the cost of WebGL
When to avoid
- Light-themed sites, because the backdrop and light are fixed dark and cyan tones
- Short sections, since the component fills the screen height by default
How to ask your AI
Create a CSS-only lamp light at the top of the dark hero: a thin line and a glow in my brand colors opening over the headline on load, no hard-coded colors in the component, adjustable height and a no-animation version for reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Ribalta
Does Ribalta keep animating all the time?
No. Ribalta animates once on load: after 0.5 seconds, the line and the glow widen over 0.8 seconds and stop. The delay and duration props change those timings. With no animation loop, the performance cost is low, and the component is rated Light in THM Componentes.
Can I use Ribalta in light mode or with my brand colors?
In the original code, Ribalta uses a navy, almost black backdrop and cyan light fixed in its classes. The THM Componentes prompt tells your AI to replace those colors with your project tokens; for a light theme, keep the section dark as a contrast block or adapt the backdrop and the glow together.
Does Ribalta have to fill the whole screen?
By default, yes: Ribalta has a minimum height equal to the screen and centers the content under the light. To use it as the title of a smaller section, pass a class that reduces the height and check that the headline still sits just below the light line, where the glow falls.
