This project implements a time segment block based on a provided design mockup. The block presents a timeline with several time intervals, each containing multiple events.
When a time interval is selected, the associated numbers change, and a new slider appears below it with detailed information about key events in that active time segment.
The block supports 2 to 6 time intervals, and all interactive points are evenly spaced along the circumference of a circle.
- Self-Contained: The block is independent of other page logic. You can add multiple instances without affecting the layout or functionality.
- Design Compliance: All lines and elements in the mockup are integrated into the layout, not just for reference.
- Responsive Slider: Displays key event details dynamically as time intervals are switched.
- React: For building user interfaces.
- TypeScript: For type safety and enhanced development experience.
- SASS: For styling the components.
- Swiper: For implementing the responsive slider functionality.
- Framer Motion: For smooth animations and transitions.
- Vite: As the build tool for fast development.
You can see a demonstration of the block in action with the maximum number of time segments by following this link to the design mockup: Figma Mockup.
To get started, clone the repository and install the dependencies:
git clone https://github.com/blackonechik/InteractiveTimeline
cd InteractiveTimeline
npm installRun the project in development mode:
npm run devOpen your browser and navigate to http://localhost:5173/ to see the block in action.
If you'd like to contribute to this project, please fork the repository and create a pull request.
This project is licensed under the MIT License.
Feel free to reach out if you have any questions or suggestions!