Ahime Neon Sign Configurator for WooCommerce

Ahime Neon Sign Configurator for WooCommerce adds a custom LED neon sign configurator to your WooCommerce store.

What customers can do

• Type their text on one to three lines and choose a font and a colour.
• Choose the size, the backboard and the options. The price updates as they go.
• See the sign in 2D or in 3D, lit, with its dimensions.
• Add the sign to the WooCommerce cart.

For the merchant

• The price is calculated by your own store from your tube, backboard and option prices, and calculated again before the order is written: the price shown is the price paid.
• No connection to an external service, no commission on your sales.
• Per-product price scales.
• Store announcements (banners and countdowns).
• The design specification is attached to each order line.
• Five fonts: Pacifico, Great Vibes, Lobster, Poppins and Bebas Neue.

Paid version

Neon Light, the paid version sold on its own site, adds all the fonts and your own fonts, more configurator interfaces, complete store themes, quotes for logos, the orders page, workshop exports, proof approval and order tracking, plus updates and support. More at https://neon-light.ahime.net/en/

Live demo: https://neon-light.ahime.net/en/demo

External services

This plugin can open one external service, and only when a customer taps a button.

Google Scene Viewer (Android augmented reality). On Android phones, the “View in your room” button opens Google Scene Viewer so the customer can see the sign at scale in their room. When the customer taps the button, the plugin first stores a temporary 3D model of the sign on your own store (it is deleted after one hour), then the phone opens Scene Viewer with the address of that model. Scene Viewer then downloads the model from your store. The text of the sign is part of that 3D model. Nothing is sent before the customer taps the button, and nothing is sent from desktop computers or iPhones (on iPhone, Apple Quick Look opens the model on the device itself).

Service provided by Google: Terms of Service, Privacy Policy.

Source code

The configurator is written in TypeScript and React. The files in assets/ named neon-*.js are built from that source with Vite, without minification, so they are readable as shipped. The third-party libraries listed below keep their own published builds.

The complete source code of this plugin (TypeScript engine, web component, PHP, build configuration) is public:
https://github.com/nahim-salami/ahime-neon-sign-configurator

To rebuild the assets/neon-*.js files, with Node.js 20 or later:

npm ci
npm run build

The build is deterministic: with the versions pinned in package-lock.json, it produces the shipped files byte for byte.

Third-party libraries and fonts

• React 18.3.1, React DOM 18.3.1 and Scheduler 0.23.2 (MIT licence): https://github.com/facebook/react
• three.js r183 (0.183.2), including the GLTFLoader, RGBELoader, HDRLoader, OrbitControls, post-processing, BufferGeometryUtils and SkeletonUtils add-ons (MIT licence): https://github.com/mrdoob/three.js
• node-qrcode 1.5.4 (MIT licence): https://github.com/soldair/node-qrcode
• dijkstrajs 1.0.3 (MIT licence): https://github.com/tcort/dijkstrajs
• Potted Plant 01 3D model by Poly Haven (CC0 1.0): https://polyhaven.com/a/potted_plant_01
• Fonts: Pacifico, Great Vibes, Lobster, Poppins and Bebas Neue, SIL Open Font License 1.1 (https://openfontlicense.org). Each font’s licence file is in assets/fonts/ next to it.