✨ Orb
A stunning, GPU-accelerated Flutter animation package with two beautiful styles —
a fluid watercolor orb and an authentic Siri-style glowing sphere.
🎨 Showcase
| Orb (Watercolor) | SiriORB (Authentic) |
|---|---|
![]() |
![]() |
| Smooth fluid watercolor gradients | Authentic iOS Siri-style glowing sphere |
🚀 Features
- 🌊 Two Distinct Styles —
Orb(watercolor fluid) &SiriORB(authentic iOS Siri sphere) - 🎙️ Amplitude Reactive — Responds dynamically to audio levels (0.0 → 1.0)
- ⚡ 60 FPS Performance — Fully GPU-accelerated via
CustomPainter, zero widget rebuilds - 🎨 Color Themes — Built-in
OrbPalettepresets:siriOriginal,inferno,aurora - 🔄 Seamless Looping — Mathematically perfect infinite animation loops with zero jitter
- 🧠 Clean API — Centralized
OrbControllerfor predictable, reactive state management - 📦 Zero Dependencies — Pure Dart & Flutter, no third-party libs required
📦 Installation
Add to your pubspec.yaml:
dependencies:
siri_orb: ^0.0.2
Then run:
flutter pub get
🔧 Quick Start
1. Import
import 'package:siri_orb/siri_orb.dart';
2. Create a Controller
late OrbController _controller;
@override
void initState() {
super.initState();
_controller = OrbController(initialAmplitude: 0.0);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
🌊 Orb — Fluid Watercolor Style
The classic fluid orb with smooth, flowing color gradients. Fully customizable with OrbPalette themes.
Orb(
controller: _controller,
radius: 120,
colors: OrbPalette.siriOriginal,
onTap: () => print('Orb tapped!'),
)
Available Palettes
| Palette | Colors |
|---|---|
OrbPalette.siriOriginal |
Blue, Cyan, Purple — classic Siri |
OrbPalette.inferno |
Red, Orange, Yellow — fire effect |
OrbPalette.aurora |
Green, Teal, Violet — northern lights |
You can also pass your own custom color list:
Orb(
controller: _controller,
radius: 120,
colors: [Colors.pink, Colors.deepPurple, Colors.indigo],
)
🔮 SiriORB — Authentic iOS Style
A completely separate, iOS 14+ authentic Siri orb implementation using BlendMode.plus additive color layering. Places glowing colored ribbons (Magenta, Blue, Cyan, Purple) inside a hard-masked glass sphere, creating the signature burning-white core.
SiriORB(
controller: _controller,
radius: 120,
onTap: () => print('SiriORB tapped!'),
)
⚠️
SiriORBmust be placed on a dark background to render correctly. The visual effect relies entirely on additiveBlendMode.plusblending, which requires a black canvas to function.
🎙️ Audio Reactivity
Feed real-time mic amplitude to the controller to make the orb come alive:
// From any audio SDK, stream values between 0.0 and 1.0
microphonePlugin.loudnessStream.listen((volume) {
_controller.amplitude = volume.clamp(0.0, 1.0);
});
Both Orb and SiriORB are fully driven by the same OrbController — swap them at runtime without changing your state logic.
🏗️ API Reference
OrbController
| Property | Type | Description |
|---|---|---|
amplitude |
double |
Audio/reactivity level. 0.0 = idle, 1.0 = max |
initialAmplitude |
double |
Starting amplitude on init |
dispose() |
void |
Clean up resources |
Orb
| Parameter | Type | Default | Description |
|---|---|---|---|
controller |
OrbController |
required | Drives animation state |
radius |
double |
80.0 |
Radius of the orb in logical pixels |
colors |
List<Color> |
OrbPalette.siriOriginal |
Color theme |
onTap |
VoidCallback? |
null |
Tap callback |
SiriORB
| Parameter | Type | Default | Description |
|---|---|---|---|
controller |
OrbController |
required | Drives animation state |
radius |
double |
80.0 |
Radius of the sphere |
onTap |
VoidCallback? |
null |
Tap callback |
💡 Full Example
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:siri_orb/siri_orb.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late OrbController _controller;
bool _useSiri = false;
@override
void initState() {
super.initState();
_controller = OrbController(initialAmplitude: 0.0);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: Scaffold(
backgroundColor: Colors.black,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Toggle between styles
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: _useSiri
? SiriORB(
key: const ValueKey('siri'),
controller: _controller,
radius: 140,
)
: Orb(
key: const ValueKey('orb'),
controller: _controller,
radius: 140,
colors: OrbPalette.siriOriginal,
),
),
const SizedBox(height: 32),
// Switch styles
Switch(
value: _useSiri,
onChanged: (v) => setState(() => _useSiri = v),
),
// Simulate audio
Slider(
value: _controller.amplitude,
onChanged: (v) => _controller.amplitude = v,
),
],
),
),
);
}
}
📄 License
MIT License — Copyright (c) 2024
Made with ❤️ for the Flutter community

