TerminalPreloader
Terminal Preloader types out a sequence of your custom lines, one character at a time, like a terminal boot sequence. Each line shows a live progress percentage as it types. When all lines are done, the overlay holds briefly, then fades out smoothly — revealing your page underneath.
Features:
- Fully editable lines array — add as many lines as you want
- Configurable typing speed, line delay, hold duration, and fade duration
- Custom background color, text color, and cursor color
- Blinking cursor follows the active line
- Automatically locks scroll while active, then releases on exit
- Hides navigation during load for a clean reveal
- Zero dependencies — pure React + Framer
How to use:
1. Drop the component onto your page, sized to fill the screen (set to fixed position)
2. Edit the Lines property to write your own boot sequence
3. Adjust timing and colors in the property panel
4. Publish — it runs automatically on page load
Shreya Agarwal
