The widget library for WordPress is here Download plugin

Cinematic Mask Intro

The Cinematic Mask Intro is a high-impact 'About' widget designed to create a dramatic first impression using advanced CSS masking and timing techniques. It emulates the opening title sequences of cinema, where text and imagery reveal themselves in a synchronized, fluid motion. This widget is perfect for agencies, luxury brands, or portfolios that want to establish a premium tone immediately upon page load.

The layout features a split-screen aesthetic where the image doesn't just fade in; it utilizes a 'curtain reveal' effect, expanding from a sliver to full width using a custom cubic-bezier easing curve. Simultaneously, the typography employs a 'line-masking' technique. The headline text is split into separate lines, hidden inside overflow containers. Upon loading, the text slides up from invisibility, creating a sophisticated, tiered entrance that feels incredibly polished. A refined secondary column creates balance, offering space for a manifesto or introductory bio. The typography uses a juxtaposition of a large, elegant serif font for the headline and a clean, technical sans-serif for the supporting text and decorative labels. The result is a widget that feels less like a webpage and more like an interactive magazine spread. On mobile devices (767px and below), the complex masking adapts into a vertical stack, preserving the animation logic but ensuring the content fits comfortably within the viewport.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.

Published:

Feb 10, 2026 10:02 AM

Category: