Brutal Magic: Bold Typography and

"Oversized outline text that fills with neon green on cursor movement, built with pure HTML, CSS, and JS"

I built this landing page to explore brutalist design with a focus on typography and interaction. The main effect: oversized outline text that fills with neon green when you move your cursor over it.

No templates. No frameworks. Just HTML, CSS, and JavaScript doing all the work.

WHAT I WAS BUILDING:

Large outline text that responds to cursor position

A neon green fill that reveals itself based on mouse movement

A scrolling marquee that adds motion to the page

The text starts as a hollow outline. As the cursor moves across it, the fill color sweeps in from the cursor position. The effect uses CSS clip-path or canvas masking to reveal the green underneath the outline.

The marquee scrolls continuously at the bottom. Its speed is tied to scroll velocity, so it speeds up when you scroll down and slows when you scroll up.

THE TECHNICAL SIDE:

The page uses HTML for structure, CSS for layout and styling, and JavaScript for the interactive effects.

The text fill effect tracks the cursor position and updates a mask in real time. Each character is rendered as an outline first, then the fill layer sits behind it. The mask reveals only the portion of the fill that the cursor has passed over.

The marquee uses CSS animation for the base scroll. JavaScript modifies the animation speed based on the scroll event. The result is a marquee that feels responsive to user input.

The color palette is minimal. Dark background, white outlines, neon green fill. The contrast makes the effect pop.

WHAT I LEARNED:

Brutalist design is about restraint. No shadows, no gradients, no rounded corners. Just raw elements and bold type.

Cursor tracking needs throttling. Without it, the fill effect stutters on fast mouse moves. I limited the update rate and used requestAnimationFrame to keep it smooth.

The full working example is on JSFiddle. Move your cursor over the text and scroll to see the marquee react.

Built by Samin Sami | Developer & 3D Experimentation