Work

Strategy, design and digital work for clearer next moves.

I work through Lucidity, my client-facing practice for strategy, design and digital systems. From a brand or website to a prototype or campaign, I help turn a complex brief into a clearer message, structure and experience.

Book a conversation Explore capabilities

Lucidity capabilities

A connected view of how Lucidity approaches strategy, design, digital systems and ongoing improvement.

Lucidity overview

Conceptual fields of strategy, design and delivery converging on one clear decision point.

Lucidity

Strategy, design and digital systems that make the next decision clearer.

Conceptual layered planes connected by one continuous route between message, experience and system.

What Lucidity is

Lucidity joins strategic direction with the work needed to make it real and keep it useful.

Conceptual fragments arranged around a missing connection that reveals where a system is breaking down.

The problem I solve

Lucidity looks for the connection between message, proof, experience, measurement and operations.

Conceptual bridge joining distinct material territories across a boundary.

Where Lucidity is useful

Fit is defined by the shape of the decision and delivery problem, not by sector.

Four conceptual panels aligned along one route, representing clarity, coherence, capability and continuity.

The Lucidity formula

Four conditions for work that can be understood, delivered, used and developed.

Conceptual annotations and evidence marks resolving into a clear working structure.

The approach

Principles that keep the strategic decision, delivery work and handover connected.

Conceptual four-stage loop showing a route from discovery through delivery and continued improvement.

How I work

A shared loop for strategic, creative, digital and ongoing work.

Conceptual fragments resolving into a visible, usable artefact.

What the process produces

Each stage makes progress tangible without assuming a fixed deliverable list.

Seven distinct conceptual modules connected by one shared delivery spine.

Capability ecosystem

Seven connected areas anchored in clearer decisions and connected delivery.

Capability areas

Conceptual forked route with one marked decision before production begins.

Strategy & advisory

Practical strategic direction for leadership and delivery teams.

Brand & identity

Visual and verbal tools that work across real touchpoints.

Conceptual planes and pathways forming a navigable digital experience.

Websites & digital experience

Websites, web applications and interactive experiences built around real journeys.

Conceptual editorial fragments arranged into a repeatable communication sequence.

Content & growth

Communication systems organised around audience needs and capacity.

Conceptual signal trace crossing a threshold into a next decision.

Search, measurement & optimisation

Search, analytics and reporting linked to practical decisions.

Conceptual layered foundations supporting a maintained digital structure.

Digital foundations & continuity

Foundational work, recurring baseline care and variable support.

Conceptual source fragments becoming an organised, navigable knowledge field.

Knowledge, AI & capability

Source-aware knowledge and AI-assisted systems with human review.

Conceptual five-stage practice loop with a visible judgement checkpoint.

AI-enabled practice

Direct AI collaboration across prototype, build, maintenance, growth and polish.

Working model

Conceptual annotated hand-off materials crossing a clear responsibility line.

Working with your team

Direct senior collaboration with clear decisions, roles and handover.

Conceptual review checkpoints surrounding a draft and its decision trail.

How quality is controlled

Visible controls protect clarity, trust and maintainability.

Engagement and next steps

Conceptual stepped route showing several possible starting points.

Offer ladder

Possible entry points that reduce uncertainty without fixed packages.

Conceptual routes arranged around a shared engagement centre.

Engagement patterns

Working patterns for defined projects, partnerships and advisory.

Conceptual creative modules joining a central brief frame.

Creative & market modules

Creative and market-facing work selected to support the core engagement.

Conceptual product, platform and data layers extending one system.

Product & technology modules

Product, technology and intelligence extensions for defined needs.

Conceptual perimeter separating selected engagement components from future or excluded work.

Scope & commercial boundaries

Capabilities show where I can help through Lucidity; a tailored proposal defines the engagement.

Conceptual prepared threshold leading to an open next route.

Next step

Share the context, choose a starting point and receive a tailored proposal.

Selected work

Choose the kind of work you need to see. Where a client spans several services, each card leads to the complete story.

Showing 51 work items.

Clear filters

A blurry image of a cityscape reveals a matrix-like pattern of blue and white rooftops. Modular hints emerge with indistinct red and black shapes, suggesting vehicles or smaller structures. The overall scene takes on an abstract feel due to its out-of-focus quality.

Prototypes

Modular Matrix Prototypes

Modular Matrix is an experiment built around a Three.js study using BatchedMesh, WebGPU rendering and TSL post-processing.

Open case study

Prototypes

108 - Minimal beat machine in the browser Prototypes

108 - Minimal beat machine in the browser is an experiment built around a minimal beat machine arranging five classic samples on a 16-step loop at 108 BPM.

Open case study

A 3D animated text effect on a black background, where the word "GLITCH" is shown. The text glitches and distorts with a flickering effect, creating a sense of digital malfunction. The letters shift and momentarily break apart before returning to their original positions.

Prototypes

Fiber Text Ring Prototypes

Fiber Text Ring is an experiment built around a React Three Fiber setup that wraps repeated text around a rotating 3D ring, using animated distortion and translucent materials for a glossy WebGL hero treatment.

Open case study

Rotating geometric shape with a crystal-like structure, displaying a kaleidoscopic array of colors on a dark background.

Prototypes

Dark Iron Crystal Polyhedral Sphere Prototypes

Dark Iron Crystal Polyhedral Sphere is an experiment in turning a polyhedral form into a fragmented, glittering object.

Open case study

Glowing neon hourglass with digital particles flowing through in a dark space.

Prototypes

Vaporwave Statue Prototypes

Vaporwave Statue is an experiment in recasting a classical statue as a glowing vaporwave object.

Open case study

The image shows a dark background with the text: "So let us surrender ourselves to the flow of existence and trust in the journey that lies before us. For it is in surrender, we may find the truth and the beauty that await us," accompanied by elegant typography. Below, in a larger, ornate font, is the word "soul.

Prototypes

OnScroll Typography Animations Prototypes

OnScroll Typography Animations is an experiment built around a collection of scroll-driven typography animation references and tests.

Open case study

Abstract red background symbolizing Mondays, with blurry white text and a clear focal point near the center, representing the start of the working week.

Prototypes

The Working Week Present Mondays Prototypes

The Working Week Present Mondays is an experiment in introducing a title sequence through a bold red field, compressed type and a playful central mark.

Open case study

Astronaut dancing with abstract neon digital grid lines in a futuristic setting.

Prototypes

Neon Space Dancing Prototypes

Neon Space Dancing Video is an experiment in pairing an astronaut dance with a luminous grid and particle-filled space.

Open case study

Prototypes

Lucidity logo option v3 Prototypes

Lucidity logo option v3 is an experiment in testing a Lucidity identity direction through rounded type, soft gradients and a high-contrast wordmark.

Open case study

Person in virtual reality headset reaching out in a digital space with graphical elements in a video.

Prototypes

Astral Demigod Prototypes

Astral Demigod video is an experiment in placing a VR-wearing figure inside a luminous, otherworldly landscape.

Open case study

Prototypes

Lucidity Logo Interactive Particles Prototypes

Lucidity Logo Interactive Particles Prototype is an experiment built around an interactive Three.js logo treatment that turns LUCIDITY into a shader-driven particle cloud.

Open case study

Animated text reading "synesthesia" with particles swirling around it, indicating a dynamic representation of multisensory perception.

Prototypes

Synesthesia Prototypes

Synesthesia Prototype is an experiment built around a keyboard-playable setup combining real-time graphics and audio to create visual and musical phrases.

Open case study

Three animated chicken characters dancing in the coop, with the central chicken engulfed in flames.

Prototypes

Coop Disco Prototypes

Coop Disco is an experiment in staging a playful animated dance scene around three chickens.

Open case study

Swarm of red particles dispersing in a dark space, mimicking the flight of an inner bird prototype.

Prototypes

Flight on the inner bird Prototypes

Flight on the inner bird Prototype is an experiment built around an atmospheric browser flight experience.

Open case study

Website

432 Lucidity Website

432 Fabric of Your Brand is an experiment in presenting a brand as a connected system rather than a single logo.

Open case study

Long exposure of a highway at night capturing the high-speed light trails of moving vehicles.

Prototypes

High-speed Light Trails Prototypes

High-speed Light Trails Prototype is an experiment built around a Three.js study of high-speed light trails for futuristic motion scenes, using a layered light-trail technique.

Open case study

Classic pac-man arcade game screen with the player ready to start a new level.

Prototypes

Pac-Man Prototypes

What this explores Pac-Man Prototype is an experiment built around a browser Pac-Man clone with a custom game loop, ghost behaviour, pickups, scoring, audio and responsive on-screen controls, built with JavaScript, HTML and CSS.

Open case study

A 3x3 rubik's cube with a solved top face and mixed colors on the other visible faces.

Prototypes

The Cube Prototypes

The Cube Prototype is an experiment built around an interactive 3D cube puzzle with size presets, scramble controls, camera options, theme customisation, and local score and preference persistence.

Open case study

Overlapping geometric shapes in a minimalist moving shapes prototype design.

Prototypes

Moving Shapes Prototypes

Moving Shapes Prototype is an experiment built around a looping kinetic-shape exercise delivered through the Lottie web player.

Open case study

Abstract blue liquid wave pattern with a smooth, glossy finish.

Prototypes

Liquid Metal Prototypes

Liquid Metal Prototype is an experiment built around a fullscreen Three.js shader study of glossy, morphing liquid-metal forms.

Open case study

A digital rendering of a column composed of assorted teal and dark blocks against a dark background, resembling a capsid prototype.

Prototypes

Capsid Prototypes

Capsid Prototype is an experiment built around a browser audiovisual WebGL scene combining Three.js, a GLB model, OrbitControls and Tone.js audio.

Open case study

A digital illustration of a spherical network prototype with interconnected lines and glowing nodes against a starry background.

Prototypes

Change Prototypes

Change Prototype is an experiment built around a slow-reveal motion concept combining sound and WebGL.

Open case study

A digital illustration of a cityscape at night, featuring 3D skyscrapers silhouetted against a deep blue sky. The buildings, bathed in shadows and lacking visible details, give the scene a minimalist, abstract appearance. Small white dots scattered across the sky resemble distant stars.

Prototypes

Expo 3D City Prototypes

Expo 3D City Prototype is an experiment built around a lightweight Three.js city scene with repeated low-poly blocks, fog, animated vehicle-light trails, and cursor- or touch-driven camera movement, with GSAP used for motion.

Open case study

A visual representation of a complex network structure with a central core highlighted in bright orange against a dark background.

Prototypes

Neural Network Prototypes

Neural Network Prototype is an experiment built around a 3D neural-network visualisation made from neurons, axons and moving signal particles.

Open case study

Prototypes

Centricity Strategy and Content

Centricity Strategy and Content is an exploratory digital project designed to test how an idea behaves on screen.

Open case study

Prototypes

Totalsports Nike concept

Totalsports Nike is an experiment in presenting a Nike and Totalsports concept through a bright geometric title treatment.

Open case study

Ambient Canvas Backgrounds prototype image

Prototypes

Ambient Canvas Backgrounds Prototypes

Ambient Canvas Backgrounds is an experiment built around five ambient webpage backgrounds built with the HTML5 Canvas API and Simplex Noise.

Open case study

Prototypes

Bloom Prototypes

Bloom is an experiment built around a static interactive flower experience with a lightweight settings layer for visual tuning.

Open case study

Prototypes

Blossom Prototypes

Blossom is an experiment built around an atmospheric particle experience with drifting gradients, bloom-heavy lighting, subtle camera movement and pointer-driven energy.

Open case study

Bubbles Animated Morphing Gradients prototype image

Prototypes

Bubbles Animated Morphing Gradients Prototypes

Bubbles Animated Morphing Gradients is an experiment built around animated gradient bubbles built from CSS animation and SVG goo effects.

Open case study

Prototypes

Constraint Prototypes

Constraint Prototype is an experiment built around a browser visual setup about how compositional rules and interaction constraints shape form, motion and spatial perception.

Open case study

Prototypes

Crystal Tetrahedron Prototypes

Crystal Tetrahedron is an experiment built around a WebGL2 port of a raymarched crystal and dispersion effect.

Open case study

Prototypes

Cyberpunk Explore Prototypes

Cyberpunk Explore is an experiment in framing a Lucidity identity with neon colour, glowing linear forms and a dark spatial field.

Open case study

Prototypes

Data Lines Engine Prototypes

Data Lines Engine is an experiment built around a data-driven animated line system.

Open case study

Prototypes

Decorative Backgrounds Prototypes

Decorative Backgrounds is an experiment built around a collection of decorative WebGL background shapes built with Three.js and TweenMax.

Open case study

Prototypes

Flow Lab Prototypes

Flow Lab is an experiment built around a WebGPU particle-simulation project built with Three.js TSL and an MLS-MPM fluid-art direction.

Open case study

Prototypes

Fluid Three Prototypes

Fluid Three is an experiment built around a Three.js fluid-simulation setup implementing the stable-fluids pipeline: advection, divergence, Poisson pressure solving, viscosity and mouse-driven force injection through custom shader passes.

Open case study

Prototypes

Fractured Orb Prototypes

Fractured Orb is an experiment built around a WebGL2 shader study with an offscreen scene pass and a composite pass for depth-of-field and grading.

Open case study

Prototypes

Gradient Prototypes

Gradient Animation is an experiment built around a set of static WebGL gradient variants driven by a shared rendering engine.

Open case study

Prototypes

Hyper Mix Prototypes

Hyper Mix is an experiment in turning a browser page into a compact visual-mixing piece.

Open case study

Prototypes

Icicle Bubbles Prototypes

Icicle Bubbles is an experiment built around a WebGL metaball-style experience that blends depth rather than transparent meshes, using depth blur and upside/downside rendering to fake light scattering.

Open case study

Prototypes

Neat Gradients Prototypes

Neat Gradients is an experiment in making animated 3D gradients editable in real time.

Open case study

Prototypes

Neon Rupture Prototypes

Neon Rupture is an experiment built around a standalone WebGL effect with an in-page admin panel.

Open case study

Prototypes

Particles Prototypes

Particles is an experiment built around a Three.js and MediaPipe Hands particle playground supporting preset formations, text and media conversion, model sampling, drawing-based shapes, gesture control, custom formations and export workflows.

Open case study

Prototypes

Polygon Shredder Prototypes

Polygon Shredder is an experiment built around a modernised Three.js particle sculpture inspired by Polygon Shredder.

Open case study

Prototypes

Raycaster Prototypes

Raycaster is an experiment in making a field of animated icosahedrons and particles respond to focus.

Open case study

Prototypes

Sphere Packing Prototypes

Sphere Packing is an experiment in giving a packed field of spheres a small set of physical and colour controls.

Open case study

Prototypes

Tear Apart Prototypes

Tear Apart is an experiment built around a recreated static clone of the Tear Apart experience.

Open case study

Prototypes

The Spirit Prototypes

The Spirit is an experiment built around a WebGL particle setup using noise derivatives and curl noise for a smoky visual treatment, with a smoky particle treatment.

Open case study

Prototypes

Threejs Orbital Glass Prototypes

Threejs Orbital Glass is an experiment built around a React Three Fiber scene rendering a glass-like orbital form with custom shaders, post-processing and animated orbiting spheres.

Open case study

Prototypes

Vanta.js Prototypes

Vanta.js is an experiment built around a reusable library of animated WebGL or p5.js backgrounds.

Open case study

Professional proof

Selected testimonials

View all testimonials

“Richard is easy to brief, delivers high-quality work first time and meets deadlines reliably. He notices the small details without needing to be prompted, which makes collaboration smooth for marketing teams.”

Ingrid De Jager, African Sales CompanyAfrican Sales CompanyEdited for clarity

“The new brand gave Aspire BCG a clearer voice and a more confident public presence. It helped the team define who they were becoming and present the quality of their work more accurately.”

Bianca A. Penaloza, Aspire BCGAspire BCGEdited for clarity

What I help with

Positioning, messaging, and offer clarity
Brand strategy and content systems
Product and website structure
AI-assisted product, web, and systems design/development
Performance, SEO, analytics, and event tracking
AI-assisted knowledge and resource workflows
Strategic documentation, proposals, SOWs, and decision support
Creative systems, prototypes, and experiments

How I work

Discover — understand the problem, source material, audience, constraints, and definition of done.
Design — shape the message, structure, system, interface, or route.
Deliver — build the page, workflow, asset, documentation, or implementation path.
Drive — measure, refine, support, and improve what matters after launch.

Best fit

Good fit: founders, creative teams, consultants, publishers, artists, and organisations trying to make complex material clearer and more usable.

Strongest briefs: brand refreshes, conversion-led sites, content/SEO systems, proposal/SOW scaffolding, analytics/event tracking, and practical documentation that turns vague direction into a usable system.

Not a fit: purely decorative work, logo-only asks, or vague “make it pop” briefs with no decision-maker access or source material.

Selected routes

Book a conversation

Start here if you have a real problem to frame, scope, build, or improve.

Lucidity

Strategy-led design, branding, websites, WordPress/Divi development, launch, and care.

CroftCo

Applied clarity, strategy, and systems for complex work where relevant.

Professional profile and work context.

GitHub

Code, experiments, and public repositories.

432

Future-facing experiments, ideas, and project work.

Resources or Work?

Use Resources when you want a framework, checklist, prompt, or reference you can apply yourself.

Use Work when the material is complex, the stakes are higher, or the thinking needs to become a live brand, site, system, or decision surface.

The work is not to add more noise. It is to make the useful shape easier to see, build, measure, and improve.

Explore resources