Fixture

An editorial lighting configurator with a three.js pendant stage, procedural finish samples, daylit room presets and a trade-order workspace.

• Best forDevelopers building furniture, lighting and configurable product storefronts.

• Configure

  Change the pendant shape, finish, diameter and cord, rotate the model, toggle its light and separate the labelled parts in an exploded view.

• Materials

  Explore six procedural finish samples, inspect a matching shade close-up and compare up to three materials.

• Scenes

  Place the configured lamp in dining, kitchen or studio presets and adjust daylight and colour temperature with illustrative lux charts.

• Orders

  Inspect fictional trade orders, production steps and saved configurations, alongside a generated technical specification drawing.

• A configurable product stage

  Lathed shade profiles morph between shapes. Finish changes sweep across the lamp; labelled exploded parts, drag rotation and lighting controls are included.

• Materials and room studies

  Procedural canvas material chips and a three.js room share the selected configuration. Presets, daylight and colour-temperature controls change the demonstration.

• Trade and technical views

  Order selection updates production details and a specification sheet drawn from the same lamp geometry. Product rules and prices are editable in local data files.

• Responsive and reduced motion

  Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

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

Products, prices, orders, delivery estimates and photometry are fictional. Configurations and cart controls are local state; quotes and PDF actions show confirmations. No checkout, ERP, measured photometric files, authentication or backend is included.

• 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, Three.js, Lucide icons
• FontsFraunces, Instrument Sans
• 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.