Proteus logo

Component Collection by Yamparala Rahul · Design Engineer

29 components7 latest
  1. 01

    NumberFlow

    Latest

    Animated number transitions — currency, percent, compact, countdown, continuous, trend, and stepper variants.

    View component
  2. 02

    SVG Curved TOC

    Latest

    Interactive table of contents with cubic Bezier connectors, clip-path animation, and offset-path demos.

    View component
  3. 03

    Peektext

    Latest

    Inline text hover reveal that expands a tiny image with smooth transition.

    View component
  4. 04

    Folder

    Latest

    macOS-style folder icons with glossy gradients, color variants, hover lift, and size options.

    View component
  5. 05

    Canvas Gallery

    Latest

    3D image canvas with pan, zoom, click-to-select, side panel, and minimap. Built with React Three Fiber + Drei.

    View component
  6. 06

    Investment Growth Chart

    Latest

    Compound growth bar chart with glowing green trend line, interactive deposit slider, and dynamic y-axis.

    View component
  7. 07

    Performance Button

    Latest

    Pixel-perfect recreation of the performance.dev Subscribe button — dark pill with two-layer shadow and inset gradient ring.

    View component
  8. 08

    Date Picker

    Experience

    Timeline ruler with drag-to-resize, NL text input, and granularity panels.

    View component
  9. 09

    Math Curve Loaders

    Experience

    Animated loading spinners based on mathematical curves — rose, Lissajous, hypotrochoid, and more.

    View component
  10. 10

    Land the Booster

    Experience

    Mars rocket landing game with physics sim, fuel/speed/angle HUD, keyboard + touch controls, and scoring.

    View component
  11. 11

    Floating Component Dock

    WIP

    Bottom-center floating utility dock with component menu, copy actions, and theme switcher.

    View component
  12. 12

    Agent Status Panels

    WIP

    Thinking-stage dotted progress rails plus vesting/volume/temperature control cards.

    View component
  13. 13

    Tab Patterns

    WIP

    Modes/personas, primary section tabs, and lightweight filter tab sets.

    View component
  14. 14

    Agent System Toasts

    WIP

    Four large system toasts: run complete, override warning, paused, and delete confirmation.

    View component
  15. 15

    Token Selector Modal

    WIP

    Searchable token list modal with top-by-volume rows and keyboard hints.

    View component
  16. 16

    Timeframe Selector

    WIP

    Segmented timeframe pill with 24H, 7D, 30D, 90D, and 1Y options.

    View component
  17. 17

    Boneyard Skeleton

    WIP

    Pixel-perfect loading skeleton for a blog card using boneyard-js, with source credit.

    View component
  18. 18

    FRI Portfolio Dashboard

    WIP

    Cyberpunk-themed AI agent portfolio with arc reactor, terminal, diagnostics, and directive panels.

    View component
  19. 19

    Navbar

    WIP

    App logo, navigation links, search input, and user menu with dropdown.

    View component
  20. 20

    Chain Selector

    WIP

    Horizontal pill bar for switching between blockchain networks.

    View component
  21. 21

    DeFi Card

    WIP

    Protocol cards with price, trend, TVL, favorites toggle, and chain badge.

    View component
  22. 22

    NFT Collections Table

    WIP

    Sortable table with volume, floor price, owners, supply columns.

    View component
  23. 23

    Gas Fee Mode Selector

    WIP

    Walking, Speed Bike, and Future Car modes with live gwei countdown.

    View component
  24. 24

    Market Stats Card

    WIP

    Crypto coins count, market cap, and 24h trading volume.

    View component
  25. 25

    Dominance Bar Card

    WIP

    BTC and ETH market dominance with colored progress bars.

    View component
  26. 26

    Transaction Toast

    WIP

    Animated transaction status toast — processing, failed, and success states.

    View component
  27. 27

    Swap Flow

    WIP

    Animated token swap interface with step-by-step flow visualization.

    View component
  28. 28

    Avatar Creator

    WIP

    Split-tone avatar builder with swatch picker, shuffle action, and custom color add.

    View component
  29. 29

    PnL Calendar

    WIP

    Monthly trading calendar with positive/negative day heatmap and paged navigation.

    View component