react-native-neon-tubes

Self-contained animated neon tubes WebGL background for React Native, powered by Three.js.

Displays a continuously looping lissajous figure-8 animation with glowing neon tube strands, colored point-light bloom, and Unreal post-process effects — identical to the original web version.

The entire Three.js animation engine is embedded inline. No CDN, no network access, no external downloads.

Installation

npm install react-native-neon-tubes react-native-webview
# or
yarn add react-native-neon-tubes react-native-webview

iOS — link native pod

cd ios && pod install

Usage

import { NeonTubes } from 'react-native-neon-tubes';

export default function SplashScreen() {
  return (
    <NeonTubes
      title="MyApp"
      subtitle="A great tagline"
      style={{ flex: 1 }}
    />
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | style | ViewStyle | — | Style for the outer container View | | title | string | — | Title text centered over the animation | | subtitle | string | — | Subtitle text below the title | | colors | [string, string, string] | ['#f967fb','#53bc28','#6958d5'] | Three tube strand colors | | lightColors | [string, string, string, string] | ['#83f36e','#fe8a2e','#ff008a','#60aed5'] | Four point light colors | | lightIntensity | number | 200 | Point light intensity | | titleFontSize | number | 56 | Title font size (px) | | subtitleFontSize | number | 14 | Subtitle font size (px) | | titleColor | string | '#ffffff' | Title text color | | subtitleColor | string | 'rgba(255,255,255,0.45)' | Subtitle text color | | titleGlowColor | string | 'rgba(249,103,251,0.7)' | Color of the text-shadow glow behind the title |

Customisation examples

Custom colors

<NeonTubes
  colors={['#00ffff', '#ff6600', '#9900ff']}
  lightColors={['#00ff88', '#ff0066', '#ffaa00', '#0088ff']}
  lightIntensity={300}
/>

Title + subtitle styling

<NeonTubes
  title="StoryLoop"
  subtitle="Where weather tells its story"
  titleColor="#ffffff"
  titleGlowColor="rgba(0, 200, 255, 0.8)"
  titleFontSize={48}
/>

How it works

The component renders a react-native-webview WebView that loads a self-contained HTML document. Inside the WebView, the animation runs via:

• [email protected] — the entire TubesCursor engine (Three.js scene with TubeGeometry strands following a lissajous parametric curve) is base64-encoded and embedded directly in the HTML. At runtime it is decoded into a blob URL and dynamically imported as an ES module.
• Idle mode — on mobile there is no cursor, so the library automatically runs its built-in idle infinity loop animation.
• Bloom — the library applies UnrealBloomPass post-processing for the neon glow effect.
• Colored point lights — four animated PointLight objects illuminate the tube geometry, creating the dynamic color variation and specular highlights.

All user interaction (touch, tap, zoom, scroll, context menu) is disabled at both the JavaScript and WebView level.

Requirements

| Platform | Minimum version | Notes | |---|---|---| | iOS | 14.0+ | Required for ES module import() in WKWebView | | Android | API 24+ (Android 7) | Chromium-based WebView with ES module support | | React Native | 0.71+ | | | react-native-webview | 13.0+ | |

Expo users: works with both Expo Go and development builds. No additional configuration needed.

Peer dependencies

react-native-webview must be installed separately. This keeps the package lean and lets you control the version used in your project.

"peerDependencies": {
  "react": ">=18.0.0",
  "react-native": ">=0.71.0",
  "react-native-webview": ">=13.0.0"
}

Building from source

If you clone this repo and want to regenerate the vendored bundle:

npm install
npm run generate   # reads threejs-components from node_modules, writes src/generated/tubes-bundle.ts
npm run build      # compiles with tsup

License

MIT