User Manual

Lumière Title

Create cinematic interactive titles driven by scroll. This guide takes you step-by-step through configuring the properties panel, helping you master every visual effect and animation mechanic with practical examples.

1. Text, Typography, and Layout

Define the structural appearance of your title before applying the visual magic.

Formatting and HTML Tags

Choose the appropriate HTML tag for SEO, set the base color, and define the text alignment. The rich text editor allows you to input the actual content of the title.

Practical example: If you are creating the main title of your page, set the Tag to "Heading 1 - <h1>" for search engines. Center the text and choose a high-contrast color against your background to maximize readability before the effect starts.
Typography Screenshot

Advanced Typographic Control

Adjust the font, weight (Font Weight), letter spacing (Letter Spacing), and line height to give your text character.

Practical example: For an imposing "Sci-Fi" effect, choose a "Black" (900) weight, transform the text to "Uppercase", and tighten the spacing to "Tighter". This way, the text will look like a solid, monolithic block.
Font Screenshot

Global Sizing

Determine how much space the animation container should occupy within your webpage.

Practical example: By setting Width to "Full" and Height to "Screen" (100vh), your title will have the entire user's monitor to explode, zoom, or light up, creating a true cinematic "splash screen".
Sizing Screenshot

2. The Catalog of 10 Cinematic Effects (Live Preview)

Drag the Lumière Title component into the dedicated areas to test the visual behavior of each preset style in real-time.

01. Epic Zoom

The title undergoes a progressive, majestic, and three-dimensional enlargement, advancing in a smooth scale towards the user's screen without ever losing quality.

Practical example: Perfect for the opening of an adventure website or a cinematic trailer: it gives the immediate sensation that the title is "coming towards" the viewer, breaking the fourth wall.

02. Anamorphic Flare

A horizontal line of light crosses the center of the screen, expanding to simulate the reflections of anamorphic cinematic lenses, while the text gently emerges from a slight blur.

Practical example: Ideal for projects related to sci-fi, technology, or premium products. Pair it with a blue light line on a black background for a perfect "Sci-Fi" style.

03. Golden 3D

The text block rises from the bottom, rotating along the X-axis with a deep 3D perspective of 800px, straightening up until it becomes flat and readable.

Practical example: Excellent for institutional brands, monumental events, award ceremonies, or luxury real estate launches, where the title must appear solid and imposing as if carved in stone.

04. Cyber Glitch

The text instantly breaks down into three misaligned chromatic layers (RGB Split) at high speed, accompanied by an outer graphic outline and distortions typical of corrupted digital video signals.

Practical example: The ideal choice for websites dedicated to electronic music, techno festivals, video games, or cyberpunk/industrial cyberpunk projects.

05. Ghostly Mist

The title slowly materializes in front of the user, emerging from a dense 20-pixel Gaussian blur, gradually reassembling as the scroll progresses.

Practical example: Perfect for a dreamlike, mysterious atmosphere or for presenting thriller and horror books. It makes the appearance of the text incredibly ethereal and soft.

06. Magma Burn

A high-energy effect. The text starts dark, suddenly explodes in a blinding glare with a strong lateral skew, and finally stabilizes, reabsorbing the heat with an elastic bounce.

Practical example: Great for extreme sports brands, motorsport events, or energy products where the animation must convey power, heat, grit, and extreme dynamism.

07. Noir Chrome

A sophisticated cinematic combination: the title is projected at an increased scale (1.5x) and heavily blurred, then gently shrinks and clarifies down to its native form.

Practical example: Ideal for high fashion portfolios, minimalist architecture sites, or creative agencies looking for refined elegance and a soft but impactful typographic reveal.

08. Neon Night

The title plunges into the screen rotating slightly and instantly activates an intermittent multicolored neon backlight, simulating the realistic flicker of a vintage gas tube.

Practical example: Perfect for nightclubs, music blogs, bars, or to add a nostalgic 80s touch (Retrowave/Synthwave) that is highly scenic.

09. Space Parallax

The text is literally "disassembled" character by character. During the scroll, each single letter rotates individually on the Y-axis coming from the depth of 3D space and aligning with an elegant cascading delay (stagger).

Practical example: Ideal for interactive landing pages heavily based on scrollytelling, where the user feels like the director of the text composition by moving the scroll wheel.

10. Minimal Impact

The text is revealed through an invisible geometric mask (clip-path). Initially confined in a very thin horizontal slit in the center, the title opens by expanding vertically like a real theater curtain.

Practical example: The perfect choice for fine art photography, interior design agencies, and clean editorial layouts where elegance lies in visual cleanliness and the absence of frills.

3. Animation Direction (Scrub vs Smooth)

The core of the component: decide whether the animation is driven millimeter by millimeter by the mouse or if it triggers automatically.

Animation Mode (Anim Mode)

Choose between Scrub (the animation moves back and forth physically tied to the speed of the user's scrolling) and Smooth (the animation starts smoothly and completes itself at its preset speed as soon as the text enters the active area).

Practical example: Use "Scrub" for colossal titles placed mid-page to compel the user to admire their dynamic evolution. Use "Smooth" if you want a triumphant and fast entry of the title in the initial section without navigation effort.
Mode Screenshot

Trigger Behavior (Smooth Trigger)

An option dedicated to Smooth mode: set whether the animation should happen only once ("Once"), repeat every time you re-enter from above ("Always"), or rewind in reverse when the text leaves the screen ("Enter and Exit").

Practical example: The "Once on Enter" option is excellent to avoid annoying the user: the effect activates the first time, delivering the "Wow" factor, but on subsequent scrolls, the text remains fixed and perfectly readable.
Smooth Screenshot

Dynamics and Timing (Easing and Duration)

Control the mathematical acceleration curve (the elasticity or linearity of the movement) and how many milliseconds the total development of the visual effect should last in automatic mode.

Practical example: An Easing set to "Power 4 Out" paired with a duration of "1500ms" will make the animation shoot at very high speed in the first moments and then brake gently and super smoothly at the end.
Timing Screenshot

4. Anchor Points and Advanced Options

Define the exact intersection between the monitor screen and the component, and add classy touches to the pinning.

Viewport and Lumière Title (Start & End)

Plan the "scroll direction" by setting the mathematical contact points. The Viewport represents the user's physical screen, while the Lumière Title corresponds to the invisible perimeter of the component.

Practical example: If you set Viewport to "Center" and Container to "Top", the effect will activate at the exact moment the top of the text block reaches the exact middle of the visitor's monitor, guaranteeing maximum visual focus.
Triggers Screenshot

Interactive Trigger Simulator

Use the control panel on the left to simulate the settings in Elements. See the live result in the browser window on the right. Blue lines control when the animation starts, Red lines control when it ends.

Elements App Icon
+
Lumière Icon
Status: ⏸ PAUSED
sassano.me
VIEWPORT
VP Start
VP End
Comp Start
Comp End
Lumière Title

Pin to Screen (Enable Pinning)

Exclusive to Scrub mode. If activated, it temporarily blocks the vertical descent of the webpage, forcing the monitor to remain fixed while the mouse movement consumes the typographic animation.

Practical example: Essential for complex effects like the "Space Parallax": the page freezes, the letters rotate in 3D completing the word before the user's eyes, and only when the effect is finished does the page unlock and return to normal scrolling.
Pinning Screenshot

Entry and Exit Fades (Fade In / Out)

Apply dynamic opacity transitions at the beginning or end of the effect's scroll to avoid abrupt visual breaks or sharp cuts on the edges of the screen.

Practical example: By activating the "Final Fade Out" on an effect like "Ghostly Mist", the title, once reassembled and read by the user, will gently fade into the dark as they proceed to the subsequent sections of the site.
Fades Screenshot

This component, like the others I’ve created, is a work of ingenuity born out of pure passion, with the main goal of enabling the creation of exceptional things with the utmost simplicity possible.

My components arise from a real need of mine to have these tools available. If you find any bugs or have specific requests, don't hesitate to contact me via the forum: I will be happy, within the limits of what's possible, to accommodate you. I am fully available for any help or clarification.

INSTALL YOUR COPY NOW Instant and secure download

This component, like the others I have created, is a work of ingenuity made out of pure passion and with the main goal of enabling the creation of exceptional things with the utmost simplicity possible.

My components are born from my own desire to have these tools available. If you find any bugs or have specific requests, do not hesitate to contact me through the forum: I will be happy, within the limits of what is possible, to accommodate you. I am fully available for any help or clarification.