All case studies

DEV3 Technologies · own product

DEV3 Nocturne: a nightclub and arcade WordPress theme with a live 3D neon club

Our own WordPress theme for nightclubs, live-music venues, e-sports bars and arcades: a scroll-driven three.js club with lasers, an LED wall and playable-looking arcade cabinets, events with lineups, WooCommerce tickets and merch, all editable in Elementor.

Industry
Entertainment & nightlife (WordPress)

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Neon 3D hero — a glowing game controller floats over a crowd in front of a pixel LED wall, with the next-night badge and Get tickets button.

Neon 3D hero — a glowing game controller floats over a crowd in front of a pixel LED wall, with the next-night badge and Get tickets button.

The challenge

A venue's website has to sell the feeling of the night and then sell the ticket. Most nightlife themes do the first with a looping video that is heavy on phones and the second by linking out to a ticketing site, and the programme itself is often a poster image nobody can search. We wanted the energy of a club built into the page itself, rendered live and light enough for a phone in a queue, while events, lineups, artists, games, tickets and merch stay structured WordPress content that the venue can update every week.

Our solution

We built Nocturne as a classic PHP theme with theme.json, on a shared DEV3 theme core and the DEV3 Theme Toolkit plugin that powers all nine DEV3 themes.

Key design decisions

  • A procedural club. The dance floor, crowd, lasers, haze, LED wall, controller, arcade cabinets and synthwave grid are three.js scenes made in code. The six cabinet games (shooter, racer, maze, tunnel, breaker and rhythm) are drawn procedurally too, so there are no image, model or video files to license or download.
  • Beat without autoplay. Lights pulse to a simulated BPM set in the widget. Sound is opt-in: a click on the sound toggle starts a short WebAudio synth loop (kick, bass and hats, no audio files) that the lights then follow. It stops when the tab is hidden and is not offered to reduced-motion visitors.
  • The programme is data. Events carry doors, room, lineup with set times, age policy, price line and a linked ticket product, so listings, countdowns and sold-out badges are generated rather than designed by hand.
  • Merch you can turn. A merch viewer preset renders a tee, cap, vinyl LP or controller, and WooCommerce colour swatches recolour it live.
  • Quality tiers. The engine picks a tier per device and lowers the pixel ratio below 40 fps; reduced-motion, Save-Data and no-WebGL visitors see a still poster while the text stays in the HTML.

Results

Nocturne ships as a complete theme with a one-click demo: 8 events, 8 artists and DJs, 8 games, 12 WooCommerce products (tickets, an arcade pass, tees, caps and vinyl) and 3 forms, plus 26 block patterns and a child theme.

It passes the suite's quality gates: php -l and phpcs (WordPress Coding Standards 3 and PHPCompatibilityWP 7.4+) with zero errors, the Theme Check plugin, the engine size budget (about 209 KB gzip), an automated WooCommerce run from add to cart to the order-received page, and an Elementor editor test where changing a control updates the live scene.

Nocturne is available on the DEV3 marketplace.

Setup guide

Requirements

  • WordPress 6.0 or newer (6.4 or newer recommended) and PHP 7.4 or newer
  • Elementor 3.20 or newer (free) for the demo pages
  • WooCommerce 8 or newer for tickets and merch, and Contact Form 7 for the forms
  • Elementor Pro is supported but not required

Install

  1. Download the ZIP from your DEV3 account and unzip it. Do not upload the download itself.
  2. In WordPress go to Appearance → Themes → Add New → Upload Theme, choose dev3-nocturne.zip and click Install Now, then Activate.
  3. When the notice appears, install and activate the recommended plugins: DEV3 Theme Toolkit (required), Elementor, WooCommerce and Contact Form 7. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: upload and activate dev3-nocturne-child.zip if you plan to change the theme's code.

Import the demo

  1. Log in as an administrator (a super admin on multisite), so the forms inside HTML widgets are kept.
  2. Go to Appearance → DEV3 Demo and click Import.
  3. Wait for the import to finish. It creates every page (built in Elementor), 8 events, 8 artists and DJs, 8 games, 12 products (tickets, an arcade pass, tees, caps and vinyl), 3 Contact Form 7 forms (VIP table request, newsletter, contact), menus, widgets, images and Customizer settings.
  4. Visit the home page and scroll through the 3D story.

From WP-CLI you can run wp --user=admin dev3tk demo import. Reset removes only what the importer created.

After importing

  • Set your venue strip, 18+ notice and the sound toggle in Appearance → Customize → Venue & night.
  • The venue, artists, events and games in the demo are fictional. Replace them before you go live.

Updates

Download the new version from Account → Downloads on dev3.tech and upload dev3-nocturne.zip again. Your changes in the child theme are kept.

How to use

Change the 3D story

Open the home page with Edit with Elementor. It has one 3D Scene widget with the preset Nocturne: neon club & arcade in Fixed background mode, and five containers with Advanced → 3D chapter switched on: 01 dance floor and controller, 02 stage and lasers, 03 arcade aisle, 04 synthwave grid, 05 the horizon.

  • For each chapter set the label (shown on the chapter rail), the copy side (left, right or centre) and, optionally, a state JSON such as {"laser":1.4,"haze":1.2}.
  • Keep the kicker numbers in your copy in step with the rail (rail 01 is the first chapter).
  • In the scene widget, change the beat (BPM), lights pulse, neon colours A and B, laser intensity, haze, the LED wall text and the floating controller.

Add events, artists and games

  • Events: set Starts, Ends, Doors, Room, Lineup (one artist per line, Name | set time), Age policy, Ticket product ID and Price line. Genres are Event categories; add the categories low-tickets or sold-out to show a badge.
  • Artists & DJs: set the Sound (for example "Techno · DJ") and a booking contact, and file each artist under Residents or Guests.
  • Games: set the Genre, Platform (cabinet, sim rig, VR), Players and the studio or price per play. Categories drive the Arcade page filters.

Show them with the Post Type Grid (with filters), Team and Hover-Reveal List widgets, and add a Countdown to the next night.

Sell tickets and merch

  • Tickets are variable, Virtual WooCommerce products with a Ticket attribute (General admission, VIP, VIP table). Put the product's ID in the event's Ticket product ID field.
  • Merch uses Colour (swatches) and Size attributes. In the product's DEV3 3D panel choose Nocturne: merch viewer with parameters such as {"object":"tee","design":"logo"}; colour swatches recolour the 3D item live.

Venue settings

Appearance → Customize covers the logo, colours, fonts, header style and button, 3D quality or off, loader, cursor and footer. Venue & night holds the venue strip above the footer, the 18+ notice (title, text, leave link), the sound toggle and the footer newsletter form shortcode.

Forms

Place the VIP table request, Newsletter and Contact forms with the toolkit Form widget or any Contact Form 7 or WPForms shortcode.

Related case studies

DEV3 Technologies · own product · Gyms, fitness and yoga studios (WordPress theme)

DEV3 Pulse: a gym, fitness and yoga WordPress theme with a self-building class timetable and a 3D kettlebell

Our own energetic WordPress theme for gyms, fitness and yoga studios: classes with intensity, a weekly timetable built from class schedules, trainers, memberships with a yearly toggle and comparison, calculators with a health note, workshops and free-trial booking.

DEV3 Technologies · own product · Creative agencies and portfolios (WordPress theme)

DEV3 Kinetic: a type-led creative agency WordPress theme with a work scroller, case studies and a 3D blob

Our own dark, type-led WordPress theme for creative agencies and portfolios: kinetic variable-font type, cursor labels, a pinned horizontal work scroller, self-building case studies, work filters with a list view, a showreel player and a project brief, with one small 3D accent.

DEV3 Technologies · own product · Music and podcasting (WordPress theme)

DEV3 Cadence: a podcast, music and artist WordPress theme with a persistent player and a 3D vinyl

Our own WordPress theme for podcasters, musicians and artists: episodes with chapters and transcripts, a waveform player with a mini dock that keeps playing across pages, discography, tour dates with tickets and MusicEvent data, merch and a press kit, with audio-reactive motion and one small 3D vinyl.