Pulse

A fitness interface combining animated activity rings, workout routes, sleep timelines and nutrition tracking with fictional data.

• Best forDevelopers building fitness and personal-wellness interfaces.

• Today

  Explore the particle life orb, activity rings and simulated heart-rate trace, with steps, recovery and shared hydration controls.

• Workouts

  Filter sample sessions, select a workout and inspect its animated route ribbon, training load and heart-rate zones.

• Sleep

  Inspect a sample night's sleep stages, cycle constellations, consistency history and overnight metrics.

• Nutrition

  Review macro and calorie charts, meal entries and water controls that also update the Today view.

• Particle activity orb

  A canvas particle sphere responds to simulated heart rate and activity progress. Animated move, exercise and stand rings surround it, with a static rendering when reduced motion is enabled.

• Workout and sleep visuals

  Selected workouts reveal an animated route ribbon coloured by heart-rate zone. The sleep view pairs cycle constellations with a scrub-enabled hypnogram, using fictional sessions and overnight measurements.

• Shared hydration controls

  Logging water from the dock, Today or Nutrition updates the same local state. Workout filters, session selection, period toggles and macro highlighting provide additional interactions with the sample data.

• Editable wellness data

  Activity, workout, sleep and nutrition examples are defined in the data module. Theme tokens, fonts and animation components can be changed independently when adapting the interface to another product.

• Responsive navigation and motion

  A compact floating dock switches between the four views and provides a hydration shortcut. Reduced-motion settings skip entrances and stop ambient loops; keyboard focus styles are included on controls.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

All health readings and scores are fictional. No wearable connection, medical assessment or live health-data service is included; hydration changes stay in local UI state.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsOutfit
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.