Squircle Shift Component
Relevant source files
The following files were used as context for generating this wiki page:
The SquircleShift component is a high-performance, WebGL-powered visual element designed for the CellarNode authentication suite. It provides a dynamic, animated background using GLSL shaders to create a fluid, "squircle" inspired aesthetic that adapts to different UI themes.
Within the project, it is primarily utilized as a side-panel visual in the LoginForm to enhance the user experience on desktop layouts. It leverages @react-three/fiber and three.js to render complex mathematical patterns directly on the GPU, ensuring smooth animations without taxing the main CPU thread.
Sources: src/react/squircle-shift.tsx:1-203, src/react/login-form.tsx:28-30, README.md:1-40
Architecture and Implementation
The component is built using a layered architecture that separates React component logic from the underlying GLSL shader code. It utilizes a Canvas from @react-three/fiber to host a ShaderPlane which renders the mathematical patterns.
Component Structure
The diagram above illustrates the hierarchy of React components and Three.js entities used to render the animation.
Sources: src/react/squircle-shift.tsx:135-201
Shader Logic
The visual effect is driven by two main shaders:
- Vertex Shader: Handles the positioning of the plane in 3D space and passes UV coordinates to the fragment shader.
- Fragment Shader: Performs complex calculations to create animated grids, radial pulses, and spiral offsets. It uses multiple "color layers" (up to 3) to accumulate intensity values into the RGB channels.
Sources: src/react/squircle-shift.tsx:17-88
Component Properties
The SquircleShift component accepts a specific set of properties to control its appearance and integration within React layouts.
| Property | Type | Default | Description |
|---|---|---|---|
theme | "light" | "dark" | "light" | Determines the background color and overall palette. |
className | string | undefined | Additional CSS classes for the container div. |
Sources: src/react/squircle-shift.tsx:10-13, src/react/squircle-shift.tsx:179-182
Internal Configuration (ShaderPlane)
The internal ShaderPlane component manages the mapping of React state and props to GLSL uniforms. These values control the physics and aesthetics of the animation.
| Uniform | Type | Description |
|---|---|---|
u_time | float | Elapsed time used for animation progression. |
u_speed | float | Overall speed multiplier for the animation. |
u_gridFrequency | float | Density of the grid pattern. |
u_waveIntensity | float | Strength of the radial pulsing effect. |
u_colorTint | vec3 | Color applied to the generated patterns. |
u_backgroundColor | vec3 | Base color of the canvas, determined by the theme. |
Sources: src/react/squircle-shift.tsx:90-117, src/react/squircle-shift.tsx:135-154
Integration with Login Form
The SquircleShift component is integrated into the LoginForm using React's Suspense and lazy loading. This ensures that the heavy Three.js and shader dependencies are only loaded when the component is actually rendered (primarily on desktop screens).
The sequence shows the lazy-loading strategy used to optimize the initial bundle size of the auth library.
Sources: src/react/login-form.tsx:28-30, src/react/login-form.tsx:443-447
Technical Requirements
The component relies on several peer dependencies as defined in the project configuration:
- React: ^18.0.0 or ^19.0.0
- Three.js: >=0.160.0
- @react-three/fiber: >=8.0.0
- Tailwind CSS: For layout and positioning via
clsx.
Sources: package.json:44-51, src/react/squircle-shift.tsx:3-6
Summary
The SquircleShift Component serves as the primary visual anchor for the CellarNode authentication interface. By combining modern React patterns like useFrame and useMemo with raw GLSL shader power, it delivers a high-fidelity animation that is both performant and theme-aware. Its modular design allows it to be used as a standalone background or integrated into complex forms like the LoginForm.
Sources: src/react/squircle-shift.tsx:203, src/react/index.ts:13