Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/modernharp/StrangerThingsIntroMaker/llms.txt

Use this file to discover all available pages before exploring further.

The Stranger Things Intro Creator is built to deliver an authentic 80s title sequence out of the box. The core visual style is intentionally fixed — it faithfully reproduces the look of the show’s iconic title card. For developers who want to go further, self-hosting the project gives you full access to the underlying CSS so you can adjust any aspect of the visual output. This page explains what the default aesthetic looks like and how to make deeper changes through the source code.

​
Default Aesthetic

The tool’s visual output is defined by three core elements drawn directly from the show’s opening sequence:
  • Glowing red typography — Text is set in a Benguiat-inspired serif font at a large display size. The signature red halo is produced by stacking multiple CSS text-shadow values at increasing radii, layering a tight bright-red glow over a broader, darker crimson bloom.
  • Dark cinematic background — The near-black background maximizes contrast against the red text, reproducing the look of the show’s main title card precisely.
  • Slow fade-in animation — The text eases in gradually, holds on screen, and then fades out, mirroring the atmospheric pacing of the actual Stranger Things title card.
The core visual style matches the show intentionally and cannot be overridden through the tool’s web interface. Changing colors, font weight, or glow radius requires editing the source CSS directly (see Self-Hosting Customization below).

​
Text Input and Formatting

The primary way to personalize your intro through the web interface is through the text you enter. A few formatting choices make a noticeable difference in the final result:
  • Length — One to three short words produce the most faithful recreation of the show’s title card. Longer phrases cause the rendered font size to shrink to fit the screen, which softens the glow effect and reduces the overall drama.
  • Capitalization — The original show’s title card uses all-capital letters. Entering your text in uppercase most closely replicates that iconic look.

​
Animation Timing

The animation plays as a continuous sequence of three phases: fade in → hold → fade out. The default timing is tuned to mirror the slow, atmospheric pacing of the actual Stranger Things title card — the text lingers on screen long enough to feel deliberate before it fades away. The tool does not expose animation speed controls in the web interface. This is a deliberate choice: the fixed, show-accurate timing is central to the cinematic feel. If you self-host the project, you can adjust the keyframe duration values in the CSS to speed up or slow down each phase independently.

​
Self-Hosting Customization

Developers who clone the repository have full access to the underlying CSS and can modify any aspect of the visual style. The most common customizations are:
  • Keyframe timing — Adjust the animation-duration and animation-delay values on the relevant keyframe rules to change how long each phase lasts.
  • Font choices — Swap the font-family declaration to use a different typeface. Pairing a web font load with @font-face lets you use any custom font file you have licensed.
  • Glow color and intensity — Edit the color and text-shadow values directly to change the hue, brightness, and spread of the glow effect.
The following snippet shows the core style rules responsible for the glowing red text effect. It is a representative example of the pattern used in the project’s stylesheet: 
.title-text {
  color: #cb1d29;
  text-shadow: 0 0 20px #cb1d29, 0 0 40px #590505, 0 0 80px #590505;
  font-family: 'Benguiat', serif;
  letter-spacing: 0.1em;
}
  • color: #cb1d29 sets the base text fill to the show’s deep crimson red.
  • The first text-shadow layer (0 0 20px #cb1d29) creates a tight, bright inner glow that matches the text color.
  • The second and third layers (0 0 40px and 0 0 80px in #590505) add progressively wider, darker halos that give the glow its depth and warmth.
  • letter-spacing: 0.1em replicates the slightly open tracking of the original title card.
For deeper customization — changing colors, swapping fonts, or tweaking keyframe timing — fork the repository and edit the CSS directly. The entire visual output is CSS-driven, so nearly any aspect of the look can be changed without touching JavaScript. See the Local Development guide for instructions on getting the project running on your machine.

Build docs developers (and LLMs) love

Get started for freeTalk to us