Skip to main content
A breathtaking, animated 3D portal built with Three.js that features glowing rings, floating crystals, space distortion, and interdimensional streams. This component creates a stunning cosmic portal effect with advanced postprocessing.

Dependencies

npm install three postprocessing
npm install -D @types/three

Props

Prop NameTypeDefaultDescription
portalComplexitynumber4Controls the complexity of the portal effects and geometry.
crystalCountnumber12Number of floating crystals in the scene.
primaryColorstring#9b59b6Main color for portal and background glow.
secondaryColorstring#3498dbSecondary color for blending and glow.
accentColorstring#e74c3cColor used for portal energy and highlight.
vortexColorstring#2ecc71Color used for swirling vortex and dimensional streams.
rotationSpeednumber0.3Speed at which objects rotate.
bloomStrengthnumber1.2Intensity of bloom postprocessing.
bloomRadiusnumber0.7Radius of the bloom effect.
bloomThresholdnumber0.2Threshold for bloom visibility.
dimensionShiftnumber4Level of dimension distortion for shader animation.

Credits

Build docs developers (and LLMs) love