Skip to content

Commit 46b7d03

Browse files
committed
fix(scale-reader): add A&D scale protocol parsing and robust fallback
1 parent 43307a5 commit 46b7d03

21 files changed

Lines changed: 9263 additions & 123 deletions
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Changelog
2+
3+
All notable changes to this package will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [0.1.0] - 2025-03-25
9+
10+
### Added
11+
12+
- Initial release extracted from gabriel project
13+
- `HeroCanvas` - Complete 3D scene with all effects combined
14+
- `HeroOrb` - Pulsating orb with custom shader and noise-based animation
15+
- `EnergyWaves` - Spherical wave effect with custom shader
16+
- `Eye` - Realistic animated eye with blinking and mouse tracking
17+
- `LightningEffect` - Procedural lightning bolts emanating from within
18+
- `SparkleEffect` - Particle system with orbital motion
19+
- `PostProcessing` - Bloom, noise, vignette, and chromatic aberration
20+
- Full TypeScript support
21+
- Build configuration with tsup
22+
- Test suite with vitest
23+
24+
### Notes
25+
26+
- This is the initial extraction of Three.js/React Three Fiber components from the gabriel project
27+
- Dependencies: `@react-three/fiber`, `@react-three/drei`, `@react-three/postprocessing`, `three`, `postprocessing`
28+
- All components are designed for portfolio and landing page use cases
29+
- Uses custom GLSL shaders for visual effects
30+
31+
[Unreleased]: https://github.com/riceharvest/opensourceframework/compare/@opensourceframework/react-three-portfolio@0.1.0...main
32+
[0.1.0]: https://github.com/riceharvest/opensourceframework/releases/tag/@opensourceframework/react-three-portfolio@0.1.0
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 OpenSource Framework Contributors
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
# @opensourceframework/react-three-portfolio
2+
3+
> Three.js/React Three Fiber visual components for portfolio and landing pages
4+
5+
[![npm version](https://img.shields.io/npm/v/@opensourceframework/react-three-portfolio.svg)](https://www.npmjs.com/package/@opensourceframework/react-three-portfolio)
6+
[![npm downloads](https://img.shields.io/npm/dm/@opensourceframework/react-three-portfolio.svg)](https://www.npmjs.com/package/@opensourceframework/react-three-portfolio)
7+
[![License](https://img.shields.io/npm/l/@opensourceframework/react-three-portfolio.svg)](./LICENSE)
8+
9+
## About
10+
11+
A collection of stunning 3D visual components built with React Three Fiber and Three.js, designed for creating impressive portfolio sites and landing pages. This package includes reusable components featuring custom shaders, animations, and post-processing effects.
12+
13+
### Components
14+
15+
- **HeroCanvas** - A complete 3D scene combining multiple visual effects
16+
- **HeroOrb** - A pulsating, transparent orb with custom shader material and noise-based animation
17+
- **EnergyWaves** - A spherical mesh with radiating wave patterns and pulsating effect
18+
- **Eye** - A realistic animated eye with iris texture, pupil, blinking eyelids, and mouse tracking
19+
- **LightningEffect** - Dynamic lightning bolts emanating from within a central form
20+
- **SparkleEffect** - A particle system creating ambient sparkles that orbit and drift
21+
- **PostProcessing** - Bloom, noise, vignette, and chromatic aberration effects
22+
23+
## Installation
24+
25+
```bash
26+
npm install @opensourceframework/react-three-portfolio three
27+
# or
28+
yarn add @opensourceframework/react-three-portfolio three
29+
# or
30+
pnpm add @opensourceframework/react-three-portfolio three
31+
```
32+
33+
> **Note**: This package has `three` as a peer dependency. You must install it separately.
34+
35+
## Usage
36+
37+
### Basic Example
38+
39+
```tsx
40+
'use client';
41+
42+
import { HeroCanvas } from '@opensourceframework/react-three-portfolio';
43+
44+
export default function HomePage() {
45+
return (
46+
<div style={{ height: '100vh', width: '100vw' }}>
47+
<HeroCanvas />
48+
</div>
49+
);
50+
}
51+
```
52+
53+
### Using Individual Components
54+
55+
```tsx
56+
'use client';
57+
58+
import { Canvas } from '@react-three/fiber';
59+
import { HeroOrb, LightningEffect, SparkleEffect } from '@opensourceframework/react-three-portfolio';
60+
61+
export function MyCustomScene() {
62+
return (
63+
<Canvas camera={{ position: [0, 0, 8], fov: 45 }}>
64+
<ambientLight intensity={0.5} />
65+
<pointLight position={[0, 0, -5]} intensity={2.0} color="#b537f2" />
66+
67+
<HeroOrb />
68+
<LightningEffect />
69+
<SparkleEffect />
70+
</Canvas>
71+
);
72+
}
73+
```
74+
75+
### Requirements
76+
77+
- React 18.0 or higher
78+
- React DOM 18.0 or higher
79+
- @react-three/fiber 8.0 or higher
80+
- Three.js 0.150.0 or higher
81+
82+
## API Reference
83+
84+
### `HeroCanvas`
85+
86+
A complete pre-configured 3D scene that combines all visual effects into a cohesive composition.
87+
88+
**Features:**
89+
- Ambient and point lighting
90+
- Eye component
91+
- HeroOrb as the central element
92+
- Lightning effects emanating from within
93+
- Sparkle particles
94+
- Post-processing effects (bloom, vignette, noise, chromatic aberration)
95+
96+
**No props required** - Ready to use out of the box.
97+
98+
---
99+
100+
### `HeroOrb`
101+
102+
A large, central orb with a custom shader material that creates a living, breathing energy ball.
103+
104+
**Features:**
105+
- Custom GLSL shader with simplex noise
106+
- Fresnel-based transparency and edge glow
107+
- Pulsating expansion effect
108+
- Optional mouse interaction (uMouse uniform)
109+
110+
**Optional uniforms (can be passed as props):**
111+
- `uColor1` - Core color (default: `#2a0044`)
112+
- `uColor2` - Rim color (default: `#9d00ff`)
113+
114+
---
115+
116+
### `Eye`
117+
118+
A realistic human eye that follows the mouse cursor and blinks naturally.
119+
120+
**Features:**
121+
- Custom iris shader with noise-based texture
122+
- Animated eyelashes
123+
- Realistic blinking (automatic, random)
124+
- Mouse tracking (follows cursor when active)
125+
- Idle look behavior (random target looking)
126+
127+
**Size:** Rendered at 0.6x scale by default (adjustable via group scale)
128+
129+
---
130+
131+
### `LightningEffect`
132+
133+
Generates procedural lightning bolts that appear to emanate from within a central form.
134+
135+
**Features:**
136+
- Procedural generation with midpoint displacement
137+
- Jagged, animated lines with jitter
138+
- Additive blending for glow effect
139+
- Automatic spawning with adjustable frequency
140+
- Bright electric purple colors
141+
142+
**Customization:**
143+
- Spawn frequency: ~0.05-0.2 seconds
144+
- Duration: 0.1-0.25 seconds per bolt
145+
- Intensity: 2.0-4.0
146+
- Bolt color: Electric purple (HSL 0.75-0.85)
147+
148+
---
149+
150+
### `SparkleEffect`
151+
152+
A particle system that creates floating sparkles with orbital motion.
153+
154+
**Features:**
155+
- GPU-accelerated points with custom shader
156+
- Particle lifecycle (spawn, drift, fade)
157+
- Swirling motion toward center
158+
- Additive blending for glow
159+
- Automatic spawning
160+
161+
**Customization:**
162+
- Spawn rate: 4-9 particles per spawn
163+
- Spawn interval: 0.05 seconds
164+
- Particle life: 1.5-3.0 seconds
165+
- Bright HSL colors (0.7-0.85 hue)
166+
167+
---
168+
169+
### `PostProcessing`
170+
171+
Applies a chain of post-processing effects to the entire scene.
172+
173+
**Effects included:**
174+
- **Bloom** - Glow for bright areas (intensity: 1.0)
175+
- **Noise** - Subtle film grain overlay (opacity: 0.05)
176+
- **Vignette** - Darkened edges (offset: 0.1, darkness: 1.1)
177+
- **Chromatic Aberration** - RGB shift (offset: 0.001)
178+
179+
**Note**: Requires `@react-three/postprocessing` as a peer dependency, which is included in this package's dependencies.
180+
181+
---
182+
183+
### `EnergyWaves`
184+
185+
A spherical mesh with a custom shader that creates expanding energy wave patterns.
186+
187+
**Features:**
188+
- Pulsating radial waves
189+
- Transparent, additive blending
190+
- Continuous rotation
191+
192+
**Note**: Not included in the default HeroCanvas to avoid visual clutter, but available as a standalone component.
193+
194+
---
195+
196+
## Advanced Customization
197+
198+
All components use custom shader materials with uniforms that can be adjusted via props. See source code for available uniforms and how to modify them.
199+
200+
### Passing Uniforms to HeroOrb
201+
202+
```tsx
203+
<HeroOrb uColor1="#ff0000" uColor2="#00ff00" />
204+
```
205+
206+
You may need to extend the component's prop types to accept custom uniforms, as they are currently typed as `any` for flexibility.
207+
208+
## Performance Considerations
209+
210+
- These components are GPU-intensive due to custom shaders and particle systems
211+
- Use `dpr={[1, 2]}` to limit device pixel ratio (recommended)
212+
- Consider disabling some effects on lower-end devices
213+
- Post-processing particularly impacts performance
214+
215+
## Browser Support
216+
217+
Requires WebGL 2.0 and modern browser features. Tested on:
218+
- Chrome 90+
219+
- Firefox 88+
220+
- Safari 15+
221+
- Edge 90+
222+
223+
## Development
224+
225+
This package is part of the [OpenSource Framework](https://github.com/riceharvest/opensourceframework) monorepo.
226+
227+
To develop locally:
228+
229+
```bash
230+
# From monorepo root
231+
pnpm install
232+
pnpm --filter @opensourceframework/react-three-portfolio dev
233+
```
234+
235+
## Testing
236+
237+
```bash
238+
pnpm --filter @opensourceframework/react-three-portfolio test
239+
```
240+
241+
## Building
242+
243+
```bash
244+
pnpm --filter @opensourceframework/react-three-portfolio build
245+
```
246+
247+
## Contributing
248+
249+
See the [root contributing guide](../../CONTRIBUTING.md) for general contribution information.
250+
251+
For this package specifically:
252+
- Follow existing code style and shader structure
253+
- Test on multiple browsers
254+
- Consider performance implications of shader changes
255+
- Document any new uniforms or props
256+
257+
## Changelog
258+
259+
See [CHANGELOG.md](./CHANGELOG.md) for details about changes.
260+
261+
## License
262+
263+
MIT - See [LICENSE](./LICENSE) for full text.
264+
265+
## Acknowledgements
266+
267+
- Original source project: [gabriel](https://github.com/riceharvest/gabriel)
268+
- [React Three Fiber](https://github.com/pmndrs/react-three-fiber)
269+
- [Three.js](https://threejs.org/)
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# @opensourceframework/react-three-portfolio - AI Summary
2+
3+
Three.js/React Three Fiber visual components for portfolio and landing pages. This package provides a collection of reusable 3D components with custom shaders, animations, and post-processing effects.
4+
5+
## Maintainer Intent
6+
7+
- Provide visually impressive, drop-in 3D components for portfolio websites
8+
- Balance visual quality with reasonable performance overhead
9+
- Support the React Three Fiber ecosystem and patterns
10+
- Keep components framework-agnostic where possible (only depends on React Three Fiber, not Next.js specific)
11+
- Document customization options and performance considerations clearly
12+
13+
## Installation
14+
15+
```bash
16+
npm install @opensourceframework/react-three-portfolio three
17+
# or
18+
pnpm add @opensourceframework/react-three-portfolio three
19+
```
20+
21+
## Links
22+
23+
- Documentation: https://github.com/riceharvest/opensourceframework/tree/main/packages/react-three-portfolio#readme
24+
- npm: https://www.npmjs.com/package/@opensourceframework/react-three-portfolio
25+
26+
## Source
27+
28+
Extracted from the gabriel project (https://github.com/riceharvest/gabriel).

0 commit comments

Comments
 (0)