A pure CSS library for creating a Star Wars-style intro crawl. No JavaScript dependencies.
Note on naming: the name references a third-party trademark. Kept as-is — this is a non-commercial homage plugin, low risk in practice.
goboldlyforward.github.io/starwarsintro
Drops a Star Wars-style scrolling intro crawl onto any page using pure CSS animations. Useful for fan sites, movie marathons, browser-game intros, presentations, or any project where the recognizable crawl effect fits.
For now, download starwarsintro.css from this repo. (npm publication is pending a rename — see Roadmap.)
<link rel="stylesheet" href="path/to/starwarsintro.css">You'll also need a star-field background image at img/stars-bg.jpg (included in this repo).
Wrap your intro content in the structure below:
<div class="star-wars-intro">
<!-- Blue intro text -->
<p class="intro-text">
A few days ago, during...
</p>
<!-- Logo image or text -->
<h2 class="main-logo">
<img src="img/your-logo.png">
</h2>
<!-- Scrolling content -->
<div class="main-content">
<div class="title-content">
<p class="content-header">Your Title</p>
<p class="content-body">
Your scrolling story goes here. As it scrolls, the text recedes into the distance and fades out, in the iconic opening-crawl style.
</p>
</div>
</div>
</div>This plugin is undergoing modernization. Tracked work:
- LICENSE (MIT)
-
.gitignore - README
-
package.json - Update CSS header (rebrand Polar Notion → Go Boldly Forward)
- Remove legacy artifacts (
.DS_Store,starwarsintro.css.zip) - Strip obsolete vendor prefixes (
-webkit/-moz/-ms/-o) and fix broken gradient syntax - Update demo page (drop legacy jQuery + Bootstrap, drop JotForm, native smooth-scroll, rebrand)
- Refresh demo with the shared Go Boldly Forward plugin design system (light + dark, Inter,
.gbf-*markup, yellow accent) - Publish to npm (as
@goboldlyforward/starwarsintro) - Optional
starwarsintro-railsgem wrapper - GitHub Actions CI (stylelint)
MIT — see LICENSE.