Perlin Noise Shaders - React Native Skia

Perlin noise shaders generate procedural textures and patterns that are perfect for creating organic, natural-looking effects. React Native Skia provides two types of Perlin noise shaders: Fractal Noise and Turbulence.

Fractal Noise

The FractalNoise component creates smooth, continuous noise patterns ideal for clouds, terrain, and organic textures.

Props

Name	Type	Description
freqX	`number`	Base frequency in the X direction (range: 0.0 to 1.0)
freqY	`number`	Base frequency in the Y direction (range: 0.0 to 1.0)
octaves	`number`	Number of noise iterations for detail
seed	`number`	Random seed for the noise pattern (default: 0)
tileWidth	`number`	If non-zero with tileHeight, makes the noise tileable (default: 0)
tileHeight	`number`	If non-zero with tileWidth, makes the noise tileable (default: 0)

Basic Example

import { Canvas, Rect, FractalNoise, Fill } from "@shopify/react-native-skia";

const FractalNoiseDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <FractalNoise freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

Understanding Parameters

Frequency (freqX, freqY)

Controls the scale of the noise pattern. Lower values create larger, smoother patterns:

// Large, smooth patterns
<FractalNoise freqX={0.01} freqY={0.01} octaves={2} />

// Medium detail
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} />

// Fine, detailed patterns
<FractalNoise freqX={0.2} freqY={0.2} octaves={6} />

Octaves

Determines the level of detail. More octaves add finer details:

// Simple, smooth
<FractalNoise freqX={0.05} freqY={0.05} octaves={1} />

// Moderate detail
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} />

// Highly detailed
<FractalNoise freqX={0.05} freqY={0.05} octaves={8} />

Seed

Changing the seed creates different variations:

<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={0} />
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={42} />
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={123} />

Turbulence

The Turbulence component creates more chaotic, energetic patterns suitable for fire, water, or abstract effects.

Props

Name	Type	Description
freqX	`number`	Base frequency in the X direction (range: 0.0 to 1.0)
freqY	`number`	Base frequency in the Y direction (range: 0.0 to 1.0)
octaves	`number`	Number of noise iterations for detail
seed	`number`	Random seed for the noise pattern (default: 0)
tileWidth	`number`	If non-zero with tileHeight, makes the noise tileable (default: 0)
tileHeight	`number`	If non-zero with tileWidth, makes the noise tileable (default: 0)

Basic Example

import { Canvas, Rect, Turbulence, Fill } from "@shopify/react-native-skia";

const TurbulenceDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

Tileable Patterns

Create seamlessly repeating noise patterns:

import { Canvas, Rect, FractalNoise } from "@shopify/react-native-skia";

const TileableNoise = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={512} height={512}>
        <FractalNoise
          freqX={0.05}
          freqY={0.05}
          octaves={4}
          tileWidth={256}
          tileHeight={256}
        />
      </Rect>
    </Canvas>
  );
};

Creative Applications

Cloud Effect

import { Canvas, Rect, FractalNoise, Fill } from "@shopify/react-native-skia";

const Clouds = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill color="#87CEEB" /> {/* Sky blue background */}
    <Rect x={0} y={0} width={256} height={256} opacity={0.8}>
      <FractalNoise freqX={0.02} freqY={0.02} octaves={6} seed={1} />
    </Rect>
  </Canvas>
);

Marble Texture

import { Canvas, Rect, Turbulence } from "@shopify/react-native-skia";

const Marble = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256} color="white">
      <Turbulence freqX={0.05} freqY={0.5} octaves={8} seed={10} />
    </Rect>
  </Canvas>
);

Organic Background

import { Canvas, Fill, FractalNoise, Blend } from "@shopify/react-native-skia";

const OrganicBackground = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill color="#1a1a2e" />
    <Fill blendMode="overlay">
      <FractalNoise freqX={0.03} freqY={0.03} octaves={5} seed={42} />
    </Fill>
  </Canvas>
);

Combining with Other Shaders

Blending with Gradients

import { 
  Canvas, 
  Rect, 
  Blend, 
  RadialGradient, 
  Turbulence,
  vec 
} from "@shopify/react-native-skia";

const NoiseGradient = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <Blend mode="difference">
        <RadialGradient
          r={128}
          c={vec(128, 128)}
          colors={["blue", "yellow"]}
        />
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Blend>
    </Rect>
  </Canvas>
);

Multiple Noise Layers

import { Canvas, Rect, Blend, FractalNoise, Fill } from "@shopify/react-native-skia";

const LayeredNoise = () => (
  <Canvas style={{ flex: 1 }}>
    <Fill color="black" />
    <Rect x={0} y={0} width={256} height={256}>
      <Blend mode="screen">
        <FractalNoise freqX={0.02} freqY={0.02} octaves={4} seed={1} />
        <FractalNoise freqX={0.08} freqY={0.08} octaves={2} seed={2} />
      </Blend>
    </Rect>
  </Canvas>
);

Colored Noise

import { 
  Canvas, 
  Rect, 
  Blend, 
  ColorShader, 
  Turbulence 
} from "@shopify/react-native-skia";

const ColoredNoise = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <Blend mode="multiply">
        <ColorShader color="#ff6b6b" />
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Blend>
    </Rect>
  </Canvas>
);

Animation

Animate noise by changing the seed value:

import { Canvas, Rect, FractalNoise } from "@shopify/react-native-skia";
import { useDerivedValue, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
import { useEffect } from "react";

const AnimatedNoise = () => {
  const progress = useSharedValue(0);
  
  useEffect(() => {
    progress.value = withRepeat(
      withTiming(100, { duration: 5000 }),
      -1,
      false
    );
  }, []);
  
  const seed = useDerivedValue(() => Math.floor(progress.value));
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <FractalNoise 
          freqX={0.05} 
          freqY={0.05} 
          octaves={4} 
          seed={seed}
        />
      </Rect>
    </Canvas>
  );
};

Fractal vs Turbulence

When to Use Fractal Noise

Smooth, continuous patterns
Natural textures (clouds, terrain)
Subtle background effects
Displacement effects

When to Use Turbulence

Chaotic, energetic effects
Fire, smoke, water effects
Abstract patterns
High-contrast textures

Performance Tips

Fewer octaves render faster
Consider using lower frequencies for large areas
Cache noise patterns that don’t change
Use tileable noise for repeating patterns
Reduce octaves for real-time animation

Common Patterns

Water Effect

<Turbulence 
  freqX={0.03} 
  freqY={0.01} 
  octaves={6} 
  seed={5}
/>

Wood Grain

<FractalNoise 
  freqX={0.5} 
  freqY={0.02} 
  octaves={4} 
  seed={7}
/>

Stone Texture

<Turbulence 
  freqX={0.1} 
  freqY={0.1} 
  octaves={8} 
  seed={12}
/>

Fog

<FractalNoise 
  freqX={0.01} 
  freqY={0.01} 
  octaves={3} 
  seed={20}
/>

Getting Started

Canvas

Shapes

Paint & Styling

Shaders

Images & Media

Text

Effects

Animations

Advanced

​Fractal Noise

​Props

​Basic Example

​Understanding Parameters

​Frequency (freqX, freqY)

​Octaves

​Seed

​Turbulence

​Props

​Basic Example

​Tileable Patterns

​Creative Applications

​Cloud Effect

​Marble Texture

​Organic Background

​Combining with Other Shaders

​Blending with Gradients

​Multiple Noise Layers

​Colored Noise

​Animation

​Fractal vs Turbulence

​When to Use Fractal Noise

​When to Use Turbulence

​Performance Tips

​Common Patterns

​Water Effect

​Wood Grain

​Stone Texture

​Fog

​See Also

Build docs developers (and LLMs) love

Fractal Noise

Props

Basic Example

Understanding Parameters

Frequency (freqX, freqY)

Octaves

Seed

Turbulence

Props

Basic Example

Tileable Patterns

Creative Applications

Cloud Effect

Marble Texture

Organic Background

Combining with Other Shaders

Blending with Gradients

Multiple Noise Layers

Colored Noise

Animation

Fractal vs Turbulence

When to Use Fractal Noise

When to Use Turbulence

Performance Tips

Common Patterns

Water Effect

Wood Grain

Stone Texture

Fog

See Also