@okinoxis/hero-scene 0.5.1 → 0.5.2

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.
Files changed (2) hide show
  1. package/README.md +47 -17
  2. package/package.json +7 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @okinoxis/hero-scene
2
2
 
3
- Compound component for cinematic hero backgrounds in Next.js — image rotation, parallax, vignettes, blur, and patterns.
3
+ Composable components for cinematic hero backgrounds in Next.js — image rotation, parallax, vignettes, blur, and patterns. RSC-compatible, zero CSS framework dependency.
4
4
 
5
5
  ## Install
6
6
 
@@ -11,7 +11,15 @@ npm install @okinoxis/hero-scene
11
11
  ## Usage
12
12
 
13
13
  ```tsx
14
- import { HeroScene } from '@okinoxis/hero-scene'
14
+ import {
15
+ HeroScene,
16
+ HeroParallax,
17
+ HeroVignette,
18
+ HeroBlur,
19
+ HeroPattern,
20
+ HeroDarkOverlay,
21
+ HeroContent,
22
+ } from '@okinoxis/hero-scene'
15
23
 
16
24
  const images = [
17
25
  { src: '/karate.jpg', color: '70, 150, 220' },
@@ -20,14 +28,14 @@ const images = [
20
28
  ]
21
29
 
22
30
  <HeroScene images={images} interval={30000} className="min-h-svh">
23
- <HeroScene.Parallax />
24
- <HeroScene.Vignette />
25
- <HeroScene.Blur />
26
- <HeroScene.Pattern />
27
- <HeroScene.DarkOverlay />
28
- <HeroScene.Content>
31
+ <HeroParallax />
32
+ <HeroVignette />
33
+ <HeroBlur />
34
+ <HeroPattern />
35
+ <HeroDarkOverlay />
36
+ <HeroContent>
29
37
  <h1>Your headline</h1>
30
- </HeroScene.Content>
38
+ </HeroContent>
31
39
  </HeroScene>
32
40
  ```
33
41
 
@@ -55,11 +63,24 @@ Content z:30 — your content
55
63
  | `interval` | `number` | `30000` |
56
64
  | `transitionDuration` | `number` | `700` |
57
65
  | `className` | `string` | — |
58
- | `onIndexChange` | `(index: number) => void` | — |
59
66
 
60
67
  `color` is `"r, g, b"` (e.g. `"210, 100, 60"`) for CSS `color-mix()`.
61
68
 
62
- ### `<HeroScene.Parallax>`
69
+ #### Listening to index changes
70
+
71
+ `HeroScene` dispatches a `CustomEvent` on `globalThis` whenever the active image changes. Use the exported constant to subscribe:
72
+
73
+ ```tsx
74
+ import { HERO_SCENE_INDEX_EVENT } from '@okinoxis/hero-scene'
75
+
76
+ useEffect(() => {
77
+ const handler = (e: CustomEvent<number>) => console.log(e.detail)
78
+ globalThis.addEventListener(HERO_SCENE_INDEX_EVENT, handler)
79
+ return () => globalThis.removeEventListener(HERO_SCENE_INDEX_EVENT, handler)
80
+ }, [])
81
+ ```
82
+
83
+ ### `<HeroParallax>`
63
84
 
64
85
  | Prop | Type | Default |
65
86
  |------|------|---------|
@@ -68,7 +89,7 @@ Content z:30 — your content
68
89
  | `mouseShiftY` | `number` | `15` |
69
90
  | `mouseLerp` | `number` | `0.04` |
70
91
 
71
- ### `<HeroScene.Vignette>`
92
+ ### `<HeroVignette>`
72
93
 
73
94
  | Prop | Type | Default |
74
95
  |------|------|---------|
@@ -78,7 +99,7 @@ Content z:30 — your content
78
99
  | `stops` | `[number, number][]` | `[[0,0]...[100,0.6]]` |
79
100
  | `transitionDuration` | `number` | `1000` |
80
101
 
81
- ### `<HeroScene.Blur>`
102
+ ### `<HeroBlur>`
82
103
 
83
104
  | Prop | Type | Default |
84
105
  |------|------|---------|
@@ -88,7 +109,7 @@ Content z:30 — your content
88
109
  | `innerRadius` | `number` | `15` |
89
110
  | `outerRadius` | `number` | `55` |
90
111
 
91
- ### `<HeroScene.Pattern>`
112
+ ### `<HeroPattern>`
92
113
 
93
114
  | Prop | Type | Default |
94
115
  |------|------|---------|
@@ -97,13 +118,13 @@ Content z:30 — your content
97
118
  | `lightColor` | `string` | `'rgba(0 0 0 / 0.15)'` |
98
119
  | `darkColor` | `string` | `'rgba(255 255 255 / 0.1)'` |
99
120
 
100
- ### `<HeroScene.DarkOverlay>`
121
+ ### `<HeroDarkOverlay>`
101
122
 
102
123
  | Prop | Type | Default |
103
124
  |------|------|---------|
104
125
  | `opacity` | `number` | `0.4` |
105
126
 
106
- ### `<HeroScene.Content>`
127
+ ### `<HeroContent>`
107
128
 
108
129
  | Prop | Type | Default |
109
130
  |------|------|---------|
@@ -115,9 +136,18 @@ Content z:30 — your content
115
136
  - Pauses off-screen via Intersection Observer
116
137
  - All decorative layers are `aria-hidden`
117
138
 
139
+ ## Dark mode
140
+
141
+ Dark mode activates automatically when an ancestor element has the `.dark` class (the same convention used by Tailwind, but **Tailwind is not required**). In dark mode:
142
+
143
+ - Images render in grayscale
144
+ - Vignette uses a black gradient instead of dominant colors
145
+ - `<HeroDarkOverlay>` becomes visible
146
+
147
+
118
148
  ## Requirements
119
149
 
120
- React 18+, Next.js 14+, Tailwind CSS (for `dark:` variant)
150
+ React 18+, Next.js 14+
121
151
 
122
152
  ## License
123
153
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@okinoxis/hero-scene",
3
- "version": "0.5.1",
3
+ "version": "0.5.2",
4
4
  "description": "Cinematic hero sections for Next.js — compound component API with image rotation, parallax, vignette overlays, blur masks, and dot patterns.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -59,5 +59,11 @@
59
59
  "cinematic",
60
60
  "compound-component"
61
61
  ],
62
+ "repository": {
63
+ "type": "git",
64
+ "url": "https://github.com/okinoxis/hero-scene.git"
65
+ },
66
+ "homepage": "https://github.com/okinoxis/hero-scene",
67
+ "bugs": "https://github.com/okinoxis/hero-scene/issues",
62
68
  "license": "MIT"
63
69
  }