Turnerworks Creative Lab Logo
TURNER W RKS

Articles

Knowledge Hub

This is our repository of ideas taking shape across design, technology, and creativity. From practical tutorials and deep-dive guides to philosophical questions about the future—everything here is built to feed your curiosity. Looking for something specific? Use the filters or search.

SPACE
Page 1 of 5 (48 results)
Dock Nav System: MacOS-Style
CREATIVE
Design • Creative & Fun

Dock Nav System: MacOS-Style

A MacOS-Style animated Dock navigation system - with sub directory support

Building a Fluid macOS-Style Dock with Vanilla JavaScript and CSS There is something undeniably satisfying about the macOS Dock. The way icons swell as your cursor approaches, the subtle "breathing" room between elements, and the glass-morphism aesthetic create a premium user experience. In this article, we’ll break down how to recreate this fluid, interactive navigation system using only standard web technologies. 1. The Design Philosophy: Glassmorphism & Motion The aesthetic relies on Backdrop Filters .

ChromaFlowStudio V1
UTILITY
Tutorial • Tools & Generators

ChromaFlowStudio V1

An article about ChromaFlowStudio V1

ChromaFlowStudio is the "Swiss-Army Knife" for ChromaDB. Designed to be the most comprehensive GUI client available, it brings every management task to your fingertips. Whether you are a total beginner or a experienced developer, ChromaFlowStudio lowers the barrier to entry, making it fast, easy, and intuitive to develop with vector databases. Written in Python intended for Windows OS, but could be adapted for linux by creating the equivilant . sh scripts instead of .

Theema - CSS Theme Designer
EXPERIMENTAL
Design • tools & generators

Theema - CSS Theme Designer

A theme generator that builds CSS Root Variables with real-time previewing and full export to use in other projects.

Theema: Architecting Dynamic CSS Design Systems The modern web is no longer static. Users expect interfaces that adapt to their environment, their preferences, and their brand identities. Theema is a professional CSS theme designer engineered to bridge the gap between visual styling and programmatic implementation. By providing a centralized workspace for defining semantic design tokens, Theema allows creators to build robust, switchable theme pairs—such as Light and Dark modes—and deploy them instantly via standard CSS variables. This article details the architectural capabilities of Theema, its comprehensive attribute system, and the streamlined export pipeline that turns design intent into production-ready code.

GridFlex CSS Grid Visual Designer
FUN
Design • Tools & Generators

GridFlex CSS Grid Visual Designer

GridFlex CSS Grid Visual Designer

GridFlex: Visual Designer for CSS Grid Building complex layouts in CSS is cumbersome with fine tuning often relying on trial and error. Whether you're calculating 1fr distributions or debugging overlapping grid items, the gap between design and code can be frustrating. Enter GridFlex — a visual designer designed to make CSS Grid intuitive, experimental, and export-ready. 🚀 The Visual First Approach GridFlex is built on the philosophy that you should see your layout before you write a single line of CSS. The core interface is split into a dual-pane workspace: 1.

Cryptix: New Release - Version 1.0.0.15 - New Features
UPDATE
Tech • security & cyber

Cryptix: New Release - Version 1.0.0.15 - New Features

Updates to our Password manager and generator tool: Cryptix

Cryptix is a browser-based password management suite we've developed as a free tool. Generate secure passwords with option to import / export credentials as encrypted . JSON making it fully portable. What's New? 1.

Paletto: Colour Swatch Designer
CREATIVE
design • tools & generators

Paletto: Colour Swatch Designer

A colour palette generator and swatch designer for creating color schemes - with real-time UI preview.

Paletto: Engineering the Perfect Spectrum for Modern Design Systems Color is the silent architect of the user experience. It dictates hierarchy, influences emotion, and ensures accessibility. Yet, for many designers and developers, the bridge between a beautiful four-color swatch and a functional, scalable UI theme is often broken. Enter Paletto : a streamlined palette generator and swatch designer engineered to transform color theory into deployable design systems. This article provides an in-depth analysis of Paletto’s capabilities, ranging from its systematic 30-color mapping logic to its real-time UI preview environment.

Animated Face Expressions: Giving AI a Soul
PERSONALITY!
Design • AI

Animated Face Expressions: Giving AI a Soul

Giving a chatbot a face and personality! CSS-driven parameter design animates the face for a wide range of expressions and actions. .

Giving AI a Personality: Executive Summary: A deep dive into the AI Bot Control Center, a modular animation framework designed to give Large Language Models (LLMs) a physical presence through reactive, parameter-driven facial expressions. Let’s face it: chatting with a white text box can feel a bit... robotic. As AI becomes more integrated into our daily lives, the "Uncanny Valley" isn't our only enemy—static interfaces are. At the intersection of Web Animation and Human-Computer Interaction (HCI) , we are building a bridge.

Variant Studio: Transform image layouts, palettes and aspect-ratios
STUDIO
Design • tools & generators

Variant Studio: Transform image layouts, palettes and aspect-ratios

An automation tool that transforms a single image into various layouts, palettes and aspect-ratios

Variant Studio transforms a single logo or image into a comprehensive suite of layout variants. By automating aspect-ratio adjustments and monochrome conversions, it eliminates the repetitive manual labor of brand asset preparation. Every designer knows the "Export Loop. " You finish a logo, and then you spend thirty minutes creating the square version, the widescreen version, the banner version, the black-and-white version, and the inverted version. It’s a bottleneck in the creative workflow.

Dark Slice: The High-Stakes Neon Arms Race
SURVIVAL!
Game • Creative & Fun

Dark Slice: The High-Stakes Neon Arms Race

Survive the encroaching void in this sudden-death survival shooter where your only weapon is a sliver of light and your own reflexes. Be alert!

Dark Slice: Scan. Shoot. Survive. A sudden-death survival shooter. Limited vision, enemies from all sides, one touch - you're dead!

LLM Chat: A universal LLM chatbot - works locally or with APIs
LOCAL-FIRST
Tech • ai

LLM Chat: A universal LLM chatbot - works locally or with APIs

A lightweight web interface for unified LLM interaction, supporting local backends and cloud-based APIs.

LLM Chat is a lightweight web interface that allows you to chat with any Large Language Model (LLM), anywhere, through a unified UI. Whether you are running a powerhouse model locally for privacy or tapping into the latest cloud-based intelligence, LLM Chat bridges the gap. It provides a professional-grade environment where you can import/export conversations, control granular inference parameters, and stream responses in real-time. 🚀 Key Features Multi-Provider Integration : Seamlessly switch between local backends ( Ollama , LM Studio ) and cloud-based APIs ( OpenAI , Google Gemini ). Privacy-Centric : Your conversations, system prompts, and settings are stored directly in your browser's localStorage .

Cryptix: Secure Password Suite
ENCRYPTED
Tech • security & cyber

Cryptix: Secure Password Suite

Password manager and generator using 256-bit AES encryption.

Cryptix is a browser-based password management suite. Generate secure passwords with option to import / export credentials as encrypted . JSON making it fully portable. 🚀 Core Features 1. Encrypted Vault Manager The vault allows you to store credentials organized by Groups (e.

CSS Toolbox: Professional Design Suite
UI TOOL
Design • tools & generators

CSS Toolbox: Professional Design Suite

A visual parameter designer for generating production-ready CSS for shadows, gradients, borders, and animations.

CSS Toolbox is a comprehensive visual designer built to eliminate the guesswork of writing complex CSS. Instead of manually tweaking pixel values and color codes in your IDE, this tool provides a real-time "stage" where you can manipulate design parameters and see the results instantly. It acts as a "Visual Parameter Designer," focusing on the most common but tedious CSS properties: advanced shadows, multi-step gradients, custom borders, and keyframe animations. 🚀 Core Design Modules CSS Toolbox is split into five specialized laboratories, each targeting a specific area of the CSS specification: 1. Shadow Parameters Go beyond simple drop shadows.

Page 1 of 5 (48 results)

Context for every creation.

Our articles serve as the documentation for our projects and the home for our broader research. Whether it’s a guide on how to use a new tool or a deep dive into a design concept, this is where we provide the "how" and the "why" behind everything we build.

SPACE