React Poincare Disc Animation

Animated hyperbolic Poincare disc tiling with CSG polygons and geometric patterns. Pure WebGL hyperbolic geometry for React with TypeScript and shadcn/ui—mathematical visualization meets performance.

React

WebGL

Building hyperbolic geometry effects?

Join our Discord community for help from other developers working with WebGL shaders.

Creating animated hyperbolic tilings requires deep understanding of non-Euclidean geometry and complex mathematical transformations. This React component uses CSG polygon-driven Poincare disc tiling with animated pattern overlays, hyperbolic reflections, and circle inversion mathematics to create mesmerizing geometric animations that showcase the beauty of hyperbolic space.

Hyperbolic geometric animation

Beautiful Poincare disc tiling with animated geometric patterns and hyperbolic transformations:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface PoincareDiscAnimationShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  polygonType?: number;  rotationSpeed?: number;  animationScale?: number;  colorIntensity?: number;}const fragmentShader = `#define POLY 0#define PI        3.14159265#define TAU        6.28318531mat2 rot2(in float a){ float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }float distLine(vec2 p, vec2 a, vec2 b){    p -= a; b -= a;    float h = clamp(dot(p, b)/dot(b, b), 0., 1.);    return length(p - b*h);}#if POLY == 0const int N = 3;const int Q = 8;#elseconst int N = 4;const int Q = 6;#endifvec3 initDomain(){    float a = sin(PI/float(N)), b = cos(PI/float(Q));    float d2 = cos(PI/float(N) + PI/float(Q))/a;    float r2 = 1./(b*b/a/a - 1.);        return sqrt(max(vec3(1. + r2, r2, d2*d2*r2), 0.));  }float count;float gIA; vec3 transform(vec2 p, vec3 domInfo){    gIA = 0.;    float gPoly = 1e5;       for(int i=0; i<24; i++){        float na = floor(mod(atan(p.x, p.y), 6.2831589)/TAU*float(N));        float ia = (na + .5)/float(N);        vec2 vert = rot2(ia*TAU)*vec2(0, domInfo.x);        float rSq = domInfo.y*domInfo.y;        vec2 pc = p - vert;        float lSq = dot(pc, pc);        if(lSq<rSq){            p = pc*rSq/lSq + vert;            p.x = -p.x;            count++;         }        else {            float poly = (length(p) - domInfo.z);            poly = max(poly, -(length(pc) - domInfo.y));            gPoly = min(gPoly, poly);                        gIA = na;             break;        }    }        return vec3(p, gPoly);}vec2 mouseInversion(vec2 p){    vec2 m = vec2(0.0, 0.0);    if(length(m) < 1e-3) m += 1e-3;         float k = 1./dot(m, m);    vec2 invCtr = k*m;     float t = (k - 1.)/dot(p - invCtr, p - invCtr);    p = t*p + (1. - t)*invCtr;    p.x = -p.x;        return p;}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 uv = (2.*fragCoord - iResolution.xy)/iResolution.y;        uv *= 1.1;        vec2 p = uv;        p = mouseInversion(p);        p *= rot2(-iTime/8.*u_rotationSpeed);        vec2 oP = p;        count = 0.;        vec3 domInfo = initDomain();         if(length(p)> 1.) p /= dot(p, p);     vec3 pp3 = transform(p, domInfo);        p = pp3.xy;    float gPoly = pp3.z;        float flip = mod(count, 2.)*2. - 1.;        float ssf = (2. - smoothstep(0., .25, abs(length(uv) - 1.) - .25));    float sf = 2./iResolution.y*ssf*ssf;    vec3 oCol = .5 + .45*cos(TAU*count/12.*u_colorIntensity + vec3(1, 0, 2));        vec3 col = vec3(0.);        col = mix(col, oCol, 1. - smoothstep(0., sf, gPoly + .01));    col = mix(col, vec3(0), 1. - smoothstep(0., sf, abs(gPoly) - .005));    vec2 v_0, v_1, v_2, v_3;    vec2 e_0, e_1, e_2, e_3;        vec2 r = vec2(0, domInfo.x - domInfo.y);        float vert = 1e5, mid = 1e5;         for(int i = 0; i<N; i++){        vec2 vi = rot2(TAU/float(N)*float(i))*vec2(0, domInfo.z);        vec2 ei = rot2(TAU/float(N)*(float(i) + .5))*r;                if(i == 0) { v_0 = vi; e_0 = ei; }        else if(i == 1) { v_1 = vi; e_1 = ei; }        else if(i == 2) { v_2 = vi; e_2 = ei; }        else if(i == 3) { v_3 = vi; e_3 = ei; }               vert = min(vert, length(p - vi));        mid = min(mid, length(p - ei));    }        vec3 svOCol = oCol;        col = mix(col, vec3(0), 1. - smoothstep(0., sf, vert - .04));        float lw = .06;    float cw = .07*3./float(N)*u_animationScale;         for(int i = 0; i<=N; i++){        if(i==N && (p.y + lw/2.*0.<0.)) break;        float magic = N == 3? .212 : .405;        vec2 vv = rot2(fract((float(i + 1))/float(N))*TAU)*vec2(0, domInfo.x + domInfo.z*magic);                float df = length(p - vv) - (domInfo.x);        df = abs(df) - lw;        col = mix(col, vec3(0), (1. - smoothstep(0., sf*10., df))*.5);        col = mix(col, vec3(0), 1. - smoothstep(0., sf, df));        col = mix(col, vec3(.07), 1. - smoothstep(0., sf, df + .015));          float m = 3.;                float aNum = (float(N) - .5)*float(Q)*m  + float(Q*2) + 1.;          if(N == 4) aNum = float(N*Q)*m;                float t2 = iTime*u_speed;        if(flip<0.){ t2 = -t2; }             vec2 cntr = p - vv;        float dir = (length(uv) > 1.)? -1. : 1.;        cntr *= rot2((fract(dir*t2/aNum))*TAU);        float na = floor(atan(cntr.x, cntr.y)/6.2831*aNum);        float ia = (na + .5)/aNum;        cntr *= rot2(ia*6.2831);        cntr.y -= domInfo.x;        float df3 = max(abs(cntr.x), abs(cntr.y)) - cw;        df3 = max(df3, df + .03);        col = mix(col, vec3(0), 1. - smoothstep(0., sf, df3));        col = mix(col, svOCol*1.3 + .1, 1. - smoothstep(0., sf, df3 + .015));     }        col = mix(col, col.yxz, smoothstep(0., sf, length(uv) - 1.));        float ring = abs(length(uv) - 1.) - .01;    col = mix(col, vec3(0), 1. - smoothstep(0., sf*4., ring));    col = mix(col, vec3(0), 1. - smoothstep(0., sf, ring));    col = mix(col, vec3(.07), 1. - smoothstep(0., sf, ring + .01));    uv = fragCoord/iResolution.xy;    col *= pow(16.*uv.x*uv.y*(1. - uv.x)*(1. - uv.y) , 1./16.);    fragColor = vec4(sqrt(max(col, 0.)), 1.);}`;export const PoincareDiscAnimationShaders = forwardRef<HTMLDivElement, PoincareDiscAnimationShadersProps>(  (    {      className,      speed = 1.0,      polygonType = 0,      rotationSpeed = 1.0,      animationScale = 1.0,      colorIntensity = 1.0,      ...props    },    ref  ) => {    return (      <div        ref={ref}        className={cn('w-full h-full', className)}        {...props}      >        <Shader          fs={fragmentShader}          uniforms={{            u_speed: { type: '1f', value: speed },            u_polygonType: { type: '1f', value: polygonType },            u_rotationSpeed: { type: '1f', value: rotationSpeed },            u_animationScale: { type: '1f', value: animationScale },            u_colorIntensity: { type: '1f', value: colorIntensity },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });PoincareDiscAnimationShaders.displayName = "PoincareDiscAnimationShaders";export default PoincareDiscAnimationShaders;

Created by Shane in 2023-12-11

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL with hyperbolic geometry mathematics, circle inversion operations, and sophisticated polygon tiling algorithms. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/poincare-disc-animation-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/poincare-disc-animation-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/poincare-disc-animation-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/poincare-disc-animation-shaders.json

Usage

import { PoincareDiscAnimationShaders } from "@/components/ui/poincare-disc-animation-shaders";

export default function Hero() {
  return (
    <PoincareDiscAnimationShaders>
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </PoincareDiscAnimationShaders>
  );
}

Why most hyperbolic implementations fail

Most developers try to create hyperbolic tilings using regular Euclidean transformations or pre-computed meshes. Completely wrong approach. You're missing the fundamental mathematics of non-Euclidean geometry, circle inversion, and Möbius transformations that define hyperbolic space. Basic implementations often produce distorted results or fail to maintain the proper geometric relationships.

This React component uses authentic hyperbolic geometry with circle inversion mathematics, Möbius transformations, and CSG polygon operations. The GPU handles everything using optimized hyperbolic reflection algorithms with proper chirality maintenance and distance field calculations. No Euclidean approximations, no geometric distortions, just pure hyperbolic mathematics at 60fps.

Features

Zero geometric approximations - Pure hyperbolic geometry with circle inversion and Möbius transformations
CSG polygon-driven tiling using triangle (3-8) and quad (4-6) configurations
Animated pattern overlays with hyperbolic-aware movement and direction reversal
Mouse interaction support with circle inversion for intuitive navigation
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 5 props for complete geometric control
Performance optimization through efficient GPU-based hyperbolic calculations
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing and anti-aliasing

API Reference

PoincareDiscAnimationShaders

Main container component for the Poincare disc animation effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`polygonType`	`number`	`0`	Polygon type (0: Triangle 3-8, 1: Quad 4-6)
`rotationSpeed`	`number`	`1.0`	Canvas rotation speed (0.1 to 3.0)
`animationScale`	`number`	`1.0`	Animated pattern scale (0.5 to 2.0)
`colorIntensity`	`number`	`1.0`	Color variation intensity (0.0 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Common gotchas

Animation not appearing: Hyperbolic transformations require high precision floating-point calculations. Older devices may struggle with the complex mathematics involved.

Performance issues on mobile: Circle inversion and Möbius transformations are computationally intensive. Consider reducing animationScale and speed for better mobile performance.

Mouse interaction not working: The mouse inversion system requires proper coordinate transformation. Ensure the component has sufficient size and isn't clipped by parent containers.

Polygons looking distorted: The shader uses specific mathematical constants for triangle (3-8) and quad (4-6) configurations. Other polygon combinations may not render correctly with current implementation.

Colors too uniform: Increase colorIntensity to enhance the procedural coloring based on hyperbolic reflection count and geometric position.

Explore other shader-based background components for React applications:

React Poincare Disc Animation

Hyperbolic geometric animation

Installation

Usage

Why most hyperbolic implementations fail

Features

API Reference

PoincareDiscAnimationShaders

Common gotchas

You might also like

Mandelbrot Patterns

Mobius Spiral Shaders

2D Noise Contours

3-Tap Voronoi Shaders

Cellular Tiled Tunnel

Smooth Voronoi Contours

Questions developers actually ask

On this page

React Poincare Disc Animation