Segmented Display Animated

A beautiful, animated seven-segment display React component built with Framer Motion.

Features

Animated seven-segment display Customizable colors Support for numbers, letters, and symbols (:, ., -)

Installation

npm install segmenteddisplay-animated

Usage

Basic Example

import { SegmentedDisplay } from 'segmenteddisplay-animated';

function App() {
  const [display, setDisplay] = useState('12:34'); //for dynamic rendering
  return (
    <>
    <div style={{width: 100, height: 100 ,flex: 1, display: 'flex'}}>
      <SegmentedDisplay
        value={display} //Supports 0-9 and characters like 'c' 'o' also some symbols like ':' '.'
        size={200} // Size of the charecters and display.
        gap={5} //optional. Controls the gap between characters.
        onColor={'#000'} //optional. determines the color of the active segments in the characters.
        offColor={'rgba(1,1,1,0.15)'} //optional. determines the color of the disabled segments in the characters.
        isAnimating={true} //optional. This is only for controlling the animastions of the symbols like ':' or '.'
        animationSpeed={0.3} //optional. This controls both characters and symbols animation speed. Higher values means slower animation.
      />
    </div>
    </>
  )
}

Examples

Timer

import { useState, useEffect } from 'react';
import { SegmentedDisplay } from 'segmenteddisplay-animated';

export default function Timer() {
  const [seconds, setSeconds] = useState(60);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s > 0 ? s - 1 : 0);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const formatted = String(seconds).padStart(2, '0');

  return (
    <SegmentedDisplay 
      value={formatted}
      size={100}
      onColor="#00ff00"
      offColor="rgba(0, 255, 0, 0.1)"
      animationSpeed={0.5}
    />
  );
}

Dependencies

• React >= 18.0.0
• framer-motion >= 10.0.0

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, visit: https://github.com/TalhaGit210/segmented/issues

Author

t210