loader-pack 1.2.4 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -38
- package/dist/LoaderPack.d.ts +15 -1
- package/dist/index.d.ts +2 -1
- package/dist/loader-pack.css +1 -1
- package/dist/loader-pack.js +273 -58
- package/dist/loader-pack.umd.cjs +1 -1
- package/dist/loaders/ClassicLoader.d.ts +2 -0
- package/dist/loaders/GlitchLoader.d.ts +2 -0
- package/dist/loaders/MinimalLoader.d.ts +2 -0
- package/dist/loaders/SpotlightLoader.d.ts +2 -0
- package/dist/loaders/TerminalLoader.d.ts +2 -0
- package/dist/standalone.d.ts +33 -0
- package/dist/types.d.ts +23 -5
- package/dist/withLoader.d.ts +9 -0
- package/package.json +13 -4
package/README.md
CHANGED
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
# loader-pack
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Beautiful, animated intro/loader screens for React apps. Pick from 5 design variants (or import just the one you need) and give your portfolio, SPA, or landing page a stunning entry.
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
---
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
11
|
+
## Variants
|
|
12
|
+
|
|
13
|
+
| Variant | Style | Preview |
|
|
14
|
+
|---------|-------|---------|
|
|
15
|
+
| `classic` | Animated name reveal, multilingual marquee, date/time | Clean & cinematic |
|
|
16
|
+
| `terminal` | CLI boot sequence, macOS-style title bar | Developer vibes |
|
|
17
|
+
| `minimal` | Ultra-clean fade-in with bordered button | Less is more |
|
|
18
|
+
| `spotlight` | Volumetric light beam with rays from corner | Dramatic & elegant |
|
|
19
|
+
| `glitch` | RGB channel-split text, pixel cat, scanlines | Cyberpunk energy |
|
|
20
|
+
|
|
21
|
+
---
|
|
17
22
|
|
|
18
23
|
## Installation
|
|
19
24
|
|
|
@@ -21,71 +26,155 @@ A beautiful, cinematic intro/loader screen for React apps. Drop it in and give y
|
|
|
21
26
|
npm install loader-pack
|
|
22
27
|
```
|
|
23
28
|
|
|
29
|
+
> **Peer dependencies:** `react >=18.0.0` and `react-dom >=18.0.0`
|
|
30
|
+
|
|
31
|
+
Don't forget to import the styles:
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import "loader-pack/styles";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
24
39
|
## Quick Start
|
|
25
40
|
|
|
41
|
+
### Option 1: Single component with `variant` prop
|
|
42
|
+
|
|
43
|
+
The simplest way — one import, pick your variant:
|
|
44
|
+
|
|
26
45
|
```tsx
|
|
27
46
|
import { LoaderPack } from "loader-pack";
|
|
28
47
|
import "loader-pack/styles";
|
|
29
48
|
|
|
30
49
|
function App() {
|
|
31
50
|
return (
|
|
32
|
-
<LoaderPack name="Your Name" theme="dark">
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<
|
|
36
|
-
</
|
|
51
|
+
<LoaderPack variant="glitch" name="Your Name" theme="dark">
|
|
52
|
+
{/* Your app content goes here — shown after the loader */}
|
|
53
|
+
<main>
|
|
54
|
+
<h1>Welcome to my site</h1>
|
|
55
|
+
</main>
|
|
37
56
|
</LoaderPack>
|
|
38
57
|
);
|
|
39
58
|
}
|
|
40
59
|
```
|
|
41
60
|
|
|
61
|
+
### Option 2: Direct import (tree-shakeable)
|
|
62
|
+
|
|
63
|
+
Import only the variant you need — smaller bundle:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { GlitchLoader } from "loader-pack";
|
|
67
|
+
import "loader-pack/styles";
|
|
68
|
+
|
|
69
|
+
function App() {
|
|
70
|
+
return (
|
|
71
|
+
<GlitchLoader name="Your Name" theme="dark">
|
|
72
|
+
<main>
|
|
73
|
+
<h1>Welcome to my site</h1>
|
|
74
|
+
</main>
|
|
75
|
+
</GlitchLoader>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Available standalone imports: `ClassicLoader`, `TerminalLoader`, `MinimalLoader`, `SpotlightLoader`, `GlitchLoader`
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
42
84
|
## Props
|
|
43
85
|
|
|
86
|
+
### `<LoaderPack>` props
|
|
87
|
+
|
|
44
88
|
| Prop | Type | Default | Description |
|
|
45
|
-
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
89
|
+
|------|------|---------|-------------|
|
|
90
|
+
| `variant` | `"classic" \| "terminal" \| "minimal" \| "spotlight" \| "glitch"` | `"classic"` | Which loader design to use |
|
|
91
|
+
| `name` | `string` | **required** | The name displayed in the loader |
|
|
92
|
+
| `children` | `ReactNode` | **required** | Your app content (revealed after start) |
|
|
93
|
+
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme |
|
|
94
|
+
| `sound` | `boolean` | `false` | Enable ambient & click sound effects |
|
|
95
|
+
| `ambientSoundSrc` | `string` | built-in | Custom ambient sound file path |
|
|
96
|
+
| `clickSoundSrc` | `string` | built-in | Custom click sound file path |
|
|
97
|
+
| `marqueeText` | `string` | built-in | Custom scrolling marquee text (classic variant) |
|
|
53
98
|
|
|
54
|
-
|
|
99
|
+
All standalone loaders (`ClassicLoader`, etc.) accept the same props except `variant`.
|
|
55
100
|
|
|
56
|
-
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## Customization Examples
|
|
57
104
|
|
|
105
|
+
### Dark theme (default)
|
|
58
106
|
```tsx
|
|
59
|
-
<LoaderPack name="Jane Doe">
|
|
60
|
-
<
|
|
107
|
+
<LoaderPack variant="spotlight" name="Jane Doe" theme="dark">
|
|
108
|
+
<App />
|
|
61
109
|
</LoaderPack>
|
|
62
110
|
```
|
|
63
111
|
|
|
64
|
-
### Light theme
|
|
112
|
+
### Light theme
|
|
113
|
+
```tsx
|
|
114
|
+
<LoaderPack variant="terminal" name="Jane Doe" theme="light">
|
|
115
|
+
<App />
|
|
116
|
+
</LoaderPack>
|
|
117
|
+
```
|
|
65
118
|
|
|
119
|
+
### With sound effects
|
|
66
120
|
```tsx
|
|
67
|
-
<LoaderPack name="Jane Doe"
|
|
68
|
-
<
|
|
121
|
+
<LoaderPack variant="classic" name="Jane Doe" sound>
|
|
122
|
+
<App />
|
|
69
123
|
</LoaderPack>
|
|
70
124
|
```
|
|
71
125
|
|
|
72
|
-
### Custom
|
|
126
|
+
### Custom sounds
|
|
127
|
+
```tsx
|
|
128
|
+
<LoaderPack
|
|
129
|
+
variant="minimal"
|
|
130
|
+
name="Jane Doe"
|
|
131
|
+
ambientSoundSrc="/audio/my-ambient.wav"
|
|
132
|
+
clickSoundSrc="/audio/my-click.wav"
|
|
133
|
+
sound
|
|
134
|
+
>
|
|
135
|
+
<App />
|
|
136
|
+
</LoaderPack>
|
|
137
|
+
```
|
|
73
138
|
|
|
139
|
+
### Custom marquee text (classic variant)
|
|
74
140
|
```tsx
|
|
75
141
|
<LoaderPack
|
|
76
|
-
|
|
77
|
-
|
|
142
|
+
variant="classic"
|
|
143
|
+
name="Jane Doe"
|
|
144
|
+
marqueeText="React • TypeScript • Node.js • Next.js • GraphQL •"
|
|
78
145
|
>
|
|
79
|
-
<
|
|
146
|
+
<App />
|
|
80
147
|
</LoaderPack>
|
|
81
148
|
```
|
|
82
149
|
|
|
83
|
-
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## How it works
|
|
153
|
+
|
|
154
|
+
1. The loader renders full-screen over your app
|
|
155
|
+
2. It plays the intro animation for the chosen variant
|
|
156
|
+
3. User clicks/taps the start action (button, pixel cat, etc.)
|
|
157
|
+
4. The loader smoothly transitions out, revealing your `children`
|
|
158
|
+
|
|
159
|
+
The `children` content is only mounted after the user clicks start, so your app code doesn't run until the intro is complete.
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
## TypeScript
|
|
164
|
+
|
|
165
|
+
All types are exported:
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
import type { LoaderPackProps, LoaderProps, LoaderVariant } from "loader-pack";
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
## Browser Support
|
|
174
|
+
|
|
175
|
+
Works in all modern browsers (Chrome, Firefox, Safari, Edge). Uses CSS custom properties and standard React 18+ APIs.
|
|
84
176
|
|
|
85
|
-
|
|
86
|
-
2. User clicks **Start →**
|
|
87
|
-
3. The screen zooms out with a smooth opacity transition
|
|
88
|
-
4. Your `children` content fades in
|
|
177
|
+
---
|
|
89
178
|
|
|
90
179
|
## License
|
|
91
180
|
|
package/dist/LoaderPack.d.ts
CHANGED
|
@@ -1,2 +1,16 @@
|
|
|
1
1
|
import { LoaderPackProps } from './types';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Convenience component — picks the right loader via the `variant` prop.
|
|
4
|
+
*
|
|
5
|
+
* ```tsx
|
|
6
|
+
* <LoaderPack variant="terminal" name="Bhavya" theme="dark">
|
|
7
|
+
* <App />
|
|
8
|
+
* </LoaderPack>
|
|
9
|
+
* ```
|
|
10
|
+
*
|
|
11
|
+
* For tree-shaking, import the variant directly instead:
|
|
12
|
+
* ```tsx
|
|
13
|
+
* import { TerminalLoader } from "loader-pack";
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export default function LoaderPack({ variant, ...rest }: LoaderPackProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { default as LoaderPack } from './LoaderPack';
|
|
2
|
-
export
|
|
2
|
+
export { ClassicLoader, TerminalLoader, MinimalLoader, SpotlightLoader, GlitchLoader, } from './standalone';
|
|
3
|
+
export type { LoaderPackProps, LoaderProps, LoaderVariant } from './types';
|
package/dist/loader-pack.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body{font-family:Geist Sans,system-ui,sans-serif}.lp-dark{--lp-bg: #000;--lp-text: #fff;--lp-muted: rgba(255,255,255,.35)}.lp-light{--lp-bg: #fff;--lp-text: #000;--lp-muted: rgba(0,0,0,.35)}.lp-container{position:fixed;inset:0;background:var(--lp-bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:transform .8s ease,opacity .8s ease}.lp-container,.lp-container *{cursor:none!important}.lp-container.lp-zoom{transform:scale(1.15);opacity:0}.lp-cursor{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;background:#fff;mix-blend-mode:exclusion;pointer-events:none;z-index:10001;will-change:transform}.lp-marquee{position:absolute;top:3%;width:100%;height:40px;overflow:hidden}.lp-track{display:flex;width:max-content;animation:lpScroll 80s linear infinite}.lp-text{font-size:.75rem;letter-spacing:.15em;padding-right:4rem;white-space:nowrap}@keyframes lpScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.lp-center{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.lp-name{font-size:clamp(2.2rem,10vw,6rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-align:center;-webkit-text-stroke:1px rgba(255,255,255,.9);color:transparent;opacity:0;transform:scale(.28);animation:lpName 1.4s ease forwards}@keyframes lpName{to{opacity:1;transform:scale(1)}}.lp-button-wrapper{height:60px;display:flex;align-items:center;justify-content:center}.lp-button{background:none;border:none;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:0;animation:lpBtn .8s ease forwards}@keyframes lpBtn{to{opacity:1}}.lp-button:hover{opacity:.6;transform:translate(6px)}.lp-arrow{margin-left:6px}.lp-date,.lp-time{position:absolute;bottom:20px;font-size:.75rem;letter-spacing:.15em;opacity:.7}.lp-date{left:24px}.lp-time{right:24px}.lp-main{opacity:0;transform:translateY(20px) scale(.98)}.lp-main.reveal{animation:lpReveal .9s ease forwards}@keyframes lpReveal{to{opacity:1;transform:translateY(0) scale(1)}}.lp-name,.lp-text,.lp-button,.lp-date,.lp-time{color:var(--lp-text)}.lp-text{opacity:.4}
|
|
1
|
+
body{font-family:Geist Sans,system-ui,sans-serif}.lp-main{opacity:0;transform:translateY(20px) scale(.98)}.lp-main.reveal{animation:lpReveal .9s ease forwards}@keyframes lpReveal{to{opacity:1;transform:translateY(0) scale(1)}}.lp-classic-dark{--lp-bg: #000;--lp-text: #fff;--lp-stroke: rgba(255, 255, 255, .9)}.lp-classic-light{--lp-bg: #fff;--lp-text: #000;--lp-stroke: rgba(0, 0, 0, .85)}.lp-classic{position:fixed;inset:0;background:var(--lp-bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:transform .8s ease,opacity .8s ease}.lp-classic.lp-classic-zoom{transform:scale(1.15);opacity:0}.lp-classic-marquee{position:absolute;top:3%;width:100%;height:40px;overflow:hidden}.lp-classic-track{display:flex;width:max-content;animation:lpClassicScroll 35s linear infinite}.lp-classic-mtext{font-size:.75rem;letter-spacing:.15em;padding-right:4rem;white-space:nowrap;color:var(--lp-text);opacity:.4}@keyframes lpClassicScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.lp-classic-center{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.lp-classic-name{font-size:clamp(2.2rem,10vw,6rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-align:center;-webkit-text-stroke:1px var(--lp-stroke);color:transparent;opacity:0;transform:scale(.28);animation:lpClassicName 1.4s ease forwards}@keyframes lpClassicName{to{opacity:1;transform:scale(1)}}.lp-classic-btnwrap{height:60px;display:flex;align-items:center;justify-content:center}.lp-classic-btn{background:none;border:none;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--lp-text);opacity:0;animation:lpClassicBtn .8s ease forwards}@keyframes lpClassicBtn{to{opacity:1}}.lp-classic-btn:hover{opacity:.6;transform:translate(6px)}.lp-classic-arrow{margin-left:6px}.lp-classic-date,.lp-classic-time{position:absolute;bottom:20px;font-size:.75rem;letter-spacing:.15em;opacity:.7;color:var(--lp-text)}.lp-classic-date{left:24px}.lp-classic-time{right:24px}.lp-terminal{position:fixed;inset:0;display:flex;flex-direction:column;z-index:9999;font-family:Fira Code,Cascadia Code,JetBrains Mono,Consolas,monospace;transition:transform .8s ease,opacity .8s ease}.lp-terminal.lp-terminal-out{transform:scale(1.06);opacity:0}.lp-terminal-dark{background:#0d1117;color:#39ff14}.lp-terminal-light{background:#f5f5f5;color:#1a7f37}.lp-terminal-header{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.08)}.lp-terminal-light .lp-terminal-header{background:#0000000a;border-bottom:1px solid rgba(0,0,0,.1)}.lp-terminal-dot{width:12px;height:12px;border-radius:50%}.lp-dot-red{background:#ff5f57}.lp-dot-yellow{background:#febc2e}.lp-dot-green{background:#28c840}.lp-terminal-title{margin-left:10px;font-size:.72rem;opacity:.5}.lp-terminal-body{flex:1;padding:20px 24px;overflow-y:auto}.lp-terminal-line{font-size:.85rem;line-height:1.9;opacity:0;animation:lpTermLine .3s ease forwards}.lp-terminal-prompt{opacity:.5;margin-right:8px}@keyframes lpTermLine{to{opacity:1}}.lp-terminal-action{margin-top:12px}.lp-terminal-btn{background:none;border:none;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}.lp-terminal-btn:hover{opacity:.7}.lp-terminal-cursor{animation:lpBlink 1s step-end infinite;margin-left:2px}@keyframes lpBlink{50%{opacity:0}}.lp-minimal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .7s ease}.lp-minimal.lp-minimal-out{opacity:0}.lp-minimal-dark{background:#0a0a0a;color:#e0e0e0}.lp-minimal-light{background:#fafafa;color:#1a1a1a}.lp-minimal-center{display:flex;flex-direction:column;align-items:center;gap:32px}.lp-minimal-name{font-size:clamp(1.8rem,7vw,4.5rem);font-weight:300;letter-spacing:.12em;text-transform:uppercase;opacity:0;animation:lpMinFade 1.2s ease forwards}@keyframes lpMinFade{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.lp-minimal-btn{background:none;border:1px solid currentColor;color:inherit;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;padding:10px 36px;cursor:pointer;opacity:0;animation:lpMinFade .8s ease .1s forwards;transition:background .3s,color .3s}.lp-minimal-dark .lp-minimal-btn:hover{background:#e0e0e0;color:#0a0a0a}.lp-minimal-light .lp-minimal-btn:hover{background:#1a1a1a;color:#fafafa}.lp-spot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;overflow:hidden;transition:opacity .8s ease}.lp-spot.lp-spot-out{opacity:0}.lp-spot-dark{background:#050505;color:#fff}.lp-spot-light{background:#f0f0f0;color:#111}.lp-spot-glow{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none;overflow:hidden}.lp-spot-glow.lp-spot-on{opacity:1}.lp-spot-glow:before{content:"";position:absolute;top:-20%;left:-10%;width:120%;height:140%;transform-origin:10% 0%;transform:rotate(-5deg);background:conic-gradient(from 120deg at 10% 0%,transparent 0deg,var(--lp-beam-mid) 15deg,var(--lp-beam-bright) 30deg,var(--lp-beam-mid) 50deg,transparent 65deg);filter:blur(30px);animation:lpBeamSweep 6s ease-in-out infinite alternate}.lp-spot-glow:after{content:"";position:absolute;top:-20%;left:-10%;width:120%;height:140%;transform-origin:10% 0%;transform:rotate(-5deg);background:conic-gradient(from 118deg at 10% 0%,transparent 0deg,var(--lp-ray) 3deg,transparent 6deg,transparent 12deg,var(--lp-ray) 15deg,transparent 18deg,transparent 24deg,var(--lp-ray) 27deg,transparent 30deg,transparent 36deg,var(--lp-ray) 39deg,transparent 42deg,transparent 48deg,var(--lp-ray) 51deg,transparent 54deg,transparent 60deg,var(--lp-ray) 63deg,transparent 66deg);filter:blur(8px);opacity:.5;animation:lpBeamSweep 6s ease-in-out infinite alternate}.lp-spot-ambient{position:absolute;width:70%;height:60%;bottom:0;left:10%;border-radius:50%;background:var(--lp-ambient);filter:blur(80px);opacity:0;transition:opacity 2s ease .3s;pointer-events:none}.lp-spot-on~.lp-spot-ambient,.lp-spot-on+*+.lp-spot-ambient{opacity:1}.lp-spot-dark{--lp-beam-bright: rgba(255,255,255,.14);--lp-beam-mid: rgba(255,255,255,.06);--lp-ray: rgba(255,255,255,.07);--lp-ambient: rgba(255,255,255,.06)}.lp-spot-light{--lp-beam-bright: rgba(0,0,0,.1);--lp-beam-mid: rgba(0,0,0,.04);--lp-ray: rgba(0,0,0,.05);--lp-ambient: rgba(0,0,0,.04)}@keyframes lpBeamSweep{0%{transform:rotate(-8deg)}to{transform:rotate(0)}}.lp-spot-center{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:40px}.lp-spot-name{font-size:clamp(2rem,9vw,6rem);font-weight:600;letter-spacing:.04em;opacity:0;transform:translateY(20px);transition:opacity 1.2s ease .3s,transform 1.2s ease .3s}.lp-spot-name.lp-spot-visible{opacity:1;transform:translateY(0)}.lp-spot-btn{background:none;border:none;color:inherit;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:0;animation:lpSpotBtn .8s ease forwards;position:relative}.lp-spot-btn:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:1px;background:currentColor;transition:width .3s ease}.lp-spot-btn:hover:after{width:100%}@keyframes lpSpotBtn{0%{opacity:0;transform:translateY(10px)}to{opacity:.7;transform:translateY(0)}}.lp-gli{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;overflow:hidden;font-family:Courier New,Fira Mono,monospace;transition:opacity .8s ease}.lp-gli.lp-gli-out{opacity:0}.lp-gli-dark{background:#080810;--lp-gli-fg: #d0d0e0;--lp-gli-accent: #a855f7;--lp-gli-accent2: #6366f1;--lp-gli-accent3: #22d3ee;--lp-gli-name-fill: transparent;--lp-gli-name-stroke: #a855f7;--lp-gli-name-glow: rgba(168, 85, 247, .5);--lp-gli-dim: rgba(255,255,255,.08);--lp-gli-scanline: rgba(0,0,0,.25);--lp-gli-cat-glow: rgba(168, 85, 247, .25)}.lp-gli-light{background:#eeeaf6;--lp-gli-fg: #1a1a2e;--lp-gli-accent: #6d28d9;--lp-gli-accent2: #4338ca;--lp-gli-accent3: #0e7490;--lp-gli-name-fill: transparent;--lp-gli-name-stroke: #5b21b6;--lp-gli-name-glow: rgba(91, 33, 182, .3);--lp-gli-dim: rgba(0,0,0,.06);--lp-gli-scanline: rgba(0,0,0,.06);--lp-gli-cat-glow: rgba(109, 40, 217, .15)}.lp-gli-scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,var(--lp-gli-scanline) 0px,var(--lp-gli-scanline) 1px,transparent 1px,transparent 3px);opacity:.6;animation:lpGliScanDrift 8s linear infinite}@keyframes lpGliScanDrift{0%{background-position-y:0}to{background-position-y:60px}}.lp-gli-noise{position:absolute;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");animation:lpGliNoiseMove .5s steps(4) infinite}@keyframes lpGliNoiseMove{0%{transform:translate(0)}25%{transform:translate(-2%,-3%)}50%{transform:translate(1%,2%)}75%{transform:translate(-1%,1%)}to{transform:translate(2%,-2%)}}.lp-gli-log{position:absolute;top:40px;left:40px;right:40px;max-height:30vh;overflow:hidden;z-index:5;font-size:clamp(.55rem,1.2vw,.75rem);letter-spacing:.08em;color:var(--lp-gli-accent);opacity:.55}.lp-gli-line{white-space:nowrap;overflow:hidden;animation:lpGliLineIn .3s ease forwards;transform:translate(-20px);opacity:0;margin-bottom:2px}@keyframes lpGliLineIn{to{transform:translate(0);opacity:1}}.lp-gli-name{position:relative;z-index:5;font-size:clamp(2.5rem,12vw,7rem);font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-gli-name-fill);-webkit-text-stroke:2px var(--lp-gli-name-stroke);paint-order:stroke fill;text-shadow:0 0 8px var(--lp-gli-name-glow),0 0 30px var(--lp-gli-name-glow);animation:lpGliNameIn .6s cubic-bezier(.22,1,.36,1) forwards;margin:0}@keyframes lpGliNameIn{0%{opacity:0;transform:scale(1.2) translateY(20px);filter:blur(8px)}60%{opacity:1;filter:blur(0)}to{transform:scale(1) translateY(0);filter:blur(0)}}.lp-gli-name:before,.lp-gli-name:after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}.lp-gli-name:before{color:transparent;-webkit-text-stroke:2px var(--lp-gli-accent3);z-index:-1;animation:lpGliChannelCyan 3s infinite linear alternate;clip-path:inset(0 0 50% 0)}.lp-gli-name:after{color:transparent;-webkit-text-stroke:2px var(--lp-gli-accent);z-index:-1;animation:lpGliChannelMagenta 3s infinite linear alternate;clip-path:inset(50% 0 0 0)}@keyframes lpGliChannelCyan{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(3px)}to{transform:translate(-2px,-1px)}}@keyframes lpGliChannelMagenta{0%{transform:translate(0)}15%{transform:translate(3px,-1px)}35%{transform:translate(-2px,2px)}55%{transform:translate(1px,-2px)}75%{transform:translate(-3px,1px)}to{transform:translate(2px)}}.lp-gli-name.lp-gli-flicker{animation:lpGliFlicker .15s steps(2) forwards}@keyframes lpGliFlicker{0%{opacity:1;transform:translate(0)}25%{opacity:.6;transform:translate(-6px,2px) skew(4deg)}50%{opacity:1;transform:translate(4px,-1px) skew(-2deg)}75%{opacity:.4;transform:translate(-2px,3px) skew(6deg)}to{opacity:1;transform:translate(0) skew(0)}}.lp-gli-cat{position:relative;z-index:5;margin-top:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;animation:lpGliCatIn .8s ease forwards;opacity:0;transition:transform .2s ease}.lp-gli-cat:hover{transform:scale(1.1)}.lp-gli-cat:hover .lp-gli-cat-glow{opacity:.9;transform:scale(1.3)}@keyframes lpGliCatIn{0%{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.lp-gli-cat-svg{width:clamp(80px,15vw,140px);height:auto;color:var(--lp-gli-accent);filter:drop-shadow(0 0 6px var(--lp-gli-accent)) drop-shadow(0 0 20px var(--lp-gli-accent2));position:relative;z-index:2}.lp-gli-cat-glow{position:absolute;width:160%;height:160%;border-radius:50%;background:radial-gradient(circle,var(--lp-gli-cat-glow) 0%,transparent 70%);opacity:.7;z-index:1;transition:opacity .3s,transform .3s;filter:blur(10px)}.lp-gli-z{position:absolute;font-family:Courier New,Fira Mono,monospace;font-weight:700;color:var(--lp-gli-accent2);z-index:3;opacity:0;pointer-events:none}.lp-gli-z1{font-size:.9rem;top:-5px;right:-10px;animation:lpGliZFloat 2.5s ease-in-out infinite;animation-delay:0s}.lp-gli-z2{font-size:.7rem;top:-18px;right:-2px;animation:lpGliZFloat 2.5s ease-in-out infinite;animation-delay:.6s}.lp-gli-z3{font-size:.55rem;top:-28px;right:6px;animation:lpGliZFloat 2.5s ease-in-out infinite;animation-delay:1.2s}@keyframes lpGliZFloat{0%{opacity:0;transform:translateY(0) rotate(0)}20%{opacity:.8}80%{opacity:.6}to{opacity:0;transform:translateY(-20px) rotate(-15deg)}}.lp-gli:before{content:"";position:absolute;left:0;right:0;height:3px;background:var(--lp-gli-accent);opacity:0;z-index:10;pointer-events:none;animation:lpGliBar 4s infinite}@keyframes lpGliBar{0%,92%{opacity:0;top:50%}93%{opacity:.8;top:20%}94%{opacity:0;top:20%}95%{opacity:.6;top:70%}96%{opacity:0;top:70%}97%{opacity:.9;top:35%;height:5px}98%{opacity:0;top:35%}to{opacity:0;top:50%}}.lp-gli-cat:after{content:"tap_to_wake_up";position:absolute;bottom:-28px;left:50%;transform:translate(-50%);font-family:Courier New,Fira Mono,monospace;font-size:.55rem;opacity:.3;letter-spacing:.15em;white-space:nowrap;color:var(--lp-gli-accent);text-transform:uppercase}
|