Animations

Rive and canvas-based animations for the BarrelHub platform

Rive Community Files

Loading Spinner

loading.riv

Success Icon

success.riv

Meter Gauge

meter.riv

Water Bar

water-bar.riv

Oil & Gas Animations

Pump Jack

Animated oil derrick

Oil Drop Loader

Falling oil droplets

Pump Jack (Fast)

Higher speed

Pump Jack (Stopped)

Static view

Trend Indicators

Up

Positive trend

Down

Negative trend

Flat

No change

Up (Static)

No animation

Down (Static)

No animation

Flat (Static)

No animation

Well Status Icons

Producing

Active well

Shut-in

Temporarily closed

Plugged

Permanently closed

Drilling

In progress

Permitted

Approved, not drilled

Usage in Context

Loading State

Loading production data...

Well Card

MABEE RANCH 2H

API: 42-317-12345

+12.5%
Daily: 145 BBLMTD: 4,350 BBL

Code Examples

Import and use components

import { PumpJack, WellStatus, TrendIndicator } from "@/components/rive";

// Animated pump jack
<PumpJack size={64} speed={0.5} isRunning={true} />

// Well status with animation
<WellStatus status="producing" size={32} animated={true} />

// Trend indicator
<TrendIndicator trend="up" size={24} animated={true} />