DEV3 Kinetic – Creative Agency & Portfolio WordPress Theme for Elementor & WooCommerce

DEV3 Kinetic is a WordPress theme for creative agencies, design and motion studios, and designers who want their portfolio to feel like their work. It is dark and type-led: a near-black canvas, bone-white headlines set huge in a variable font, serif italic accent words in acid green, and motion in every section. The hero headline stretches toward the cursor, buttons pull gently toward the pointer, the cursor grows into a labelled disc over your work, and the selected work glides sideways while the section stays pinned. There is one small 3D accent: an iridescent blob beside the headline that slowly morphs and catches the light.

There is no public live demo. Watch the video tour at the top of this page, or step through the screenshots at desktop, tablet and phone sizes.

A hero that moves

• Kinetic type: the headline uses Mona Sans with width and weight axes, so its characters rise in on load and stretch toward the pointer. The footer call to action and the 404 numbers respond the same way.
• A small iridescent 3D blob with a satellite sphere, a studio availability line ("Booking projects for spring 2027") and a live studio clock for your city.
• See the work and Play showreel buttons. The showreel opens in a full-screen player; Esc or the close button returns focus to the button.
• An acid marquee band runs under the hero.

Work, the way agencies show it

• Horizontal work scroller on the home page: the section pins and selected case studies glide sideways as you scroll, each revealed with a colour wipe. On phones, with touch or with reduced motion it becomes a native swipe row with snap.
• Work archive with a huge title and a count, animated service filters (Brand, Campaign, Digital, Motion…) that are linkable, and a grid / list switch that each visitor's browser remembers.
• List view shows big client rows with a preview image that follows the cursor.
• A hover-reveal list of more work and a capabilities accordion whose lines widen and turn acid on hover.

A case-study template that builds itself

Each case study is a post with short fields: client, year, location, services, the challenge, the approach, results (+64% | app sessions), a gallery, credits (Direction: names), a live link and a case colour. The template turns them into a full page:

• the kinetic title, service pills, a summary and a facts row
• a full-bleed cover with parallax
• challenge and approach
• results that count up on the case colour
• a gallery that masks in, the editable story and credits
• a big next project link whose cover fades in on hover

The case colour also tints the cursor reveal, the results band and hover states, so every project keeps its own identity.

Motion everywhere, reduced-motion safe

• Custom cursor: a ring and dot that grow into an acid disc with a label ("View", "Read", "Open") over work, links and the reel. Add data-cursor-label to any link. It can be turned off in the Customizer and is off on touch screens.
• Magnetic buttons, image reveals in the case colour, staggered cards and scroll-scrubbed statements where words light up as you read.
• Velocity skew: images lean slightly with fast scrolling.
• Page transitions: a wipe between pages with cross-document View Transitions in Chrome and Safari, and a fade elsewhere.
• Every Elementor widget and container gets an Advanced → DEV3 Motion panel: reveal, split text, mask, parallax, stagger, stacked cards, horizontal scroll, counters and tilt.
• With reduced motion set in the operating system, everything is visible and static, the scroller becomes a swipe row and the reel does not autoplay.

Capabilities, studio and the brief

• Capabilities with an accordion, a process of four sticky stacked cards in ink, lilac, acid and coral, engagement models and an FAQ.
• Studio with culture boards, values, the team, awards and a hiring band; About with a manifesto, timeline and numbers; Careers with open roles and the hiring process.
• Clients and awards: a hairline logo wall and an awards list grouped by year, plus client quotes.
• Start a project: contact links, two live studio clocks and a project brief form with service chips, budget chips and a timeline, plus an intro-call request that is saved under Requests in the dashboard and emailed to the site admin.
• A Journal (the blog) with reading progress.

A small shop

The demo shop sells prints (A3, A2 and A1 size swatches), digital templates and kits (virtual, no shipping) and studio goods. The mini-cart drawer, quick view, cart, checkout and account pages are styled in the dark Kinetic look with an acid place-order button.

Edit everything

• Every demo page is built with the free Elementor plugin and DEV3 widgets: 3D Scene, Kinetic Heading, Marquee, Magnetic Button, Counter, Hover-Reveal List, Testimonials, Team, Timeline, Pricing, FAQ, Post Type Grid, Logo Wall, Awards, Accordion, Request Form and Newsletter.
• The blob is a 3D Scene widget with tint, satellite, morph amount, morph speed, idle spin and scroll turn controls that update live in the editor.
• The block editor gets 23 block patterns, from a kinetic hero and featured project to process, awards, open roles and big acid calls to action, plus block styles such as Paper group, Extra-wide heading and Showreel button.
• Customizer: colours, fonts, header style, sticky header, header button, cursor, grain, smooth scrolling, 3D quality, footer and newsletter, shop columns, and Kinetic: studio & showreel for the availability line, clock city and time zone, and the showreel video and poster.
• A child theme is included.

Performance and accessibility

• The 3D engine (about 207 KB gzip) is fetched only when the blob is near the viewport; the blob preset and motion layer load on demand. The blob pauses offscreen and shows a poster image without WebGL or with reduced motion.
• Self-hosted fonts (Mona Sans, DM Serif Display, JetBrains Mono), with no runtime requests to Google.
• Skip link, visible focus, keyboard-operable filters, accordion, reel dialog and menus, and split headings that keep an accessible label.
• No horizontal scroll at 390 px; tested at 1440, 820 and 390 px. RTL support and a .pot file.

What's in the download

• dev3-kinetic.zip: the theme
• dev3-kinetic-child.zip: the child theme
• dev3-theme-toolkit.zip: the DEV3 Theme Toolkit plugin (case studies, capabilities, people, client quotes, request forms, Elementor widgets and blocks, motion controls, WooCommerce extras, demo importer)
• dev3-kinetic-demo-content.zip: the demo package, for reference
• Documentation/: the HTML guide

The one-click demo imports "Kinetic Studio", a fictional brand, digital and motion studio in two cities: the home, work, capabilities, studio, about, careers, start a project, journal and shop pages, 10 case studies, 6 capabilities, 8 studio members, client quotes, 6 journal posts, 8 products, the menus and the project brief form. The studio, its clients, people, awards and figures are fictional. Every image, the 19-second showreel and the 3D blob are original renders made from code for this theme (no stock photos, no photos of people, no AI images).

Requirements

• WordPress 6.0 or newer (tested up to 6.8) and PHP 7.4 or newer
• The DEV3 Theme Toolkit plugin (included and required for the widgets, post types and demo)
• Elementor (free) recommended; Elementor Pro optional
• WooCommerce for the shop; Contact Form 7 for the project brief form

Support

Six months of support are included: installation, demo import and questions about the theme's features. Support does not cover custom design work, your own showreel or video encoding, or payment gateway accounts. Read how we built Kinetic for the design decisions behind it.