|
| 1 | +# @opensourceframework/react-three-portfolio |
| 2 | + |
| 3 | +> Three.js/React Three Fiber visual components for portfolio and landing pages |
| 4 | +
|
| 5 | +[](https://www.npmjs.com/package/@opensourceframework/react-three-portfolio) |
| 6 | +[](https://www.npmjs.com/package/@opensourceframework/react-three-portfolio) |
| 7 | +[](./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/) |
0 commit comments