Discover the best keyboard websites created by professional designers. Get inspired and start planning your perfect keyboard web design today!

I finally decided to get my hands dirty and learn ThreeJS + React Three Fiber to give life to my ideas using interactive 3D. This project is the end result of my tests and study.

Highly inspired by the Work Louder(c) Creator Micro pad (https://worklouder.cc/creator-micro/), I created a fictional collab between your favorite website builder and this amazing product for a limited edition with custom shortcuts to improve your workflow.

My process:
- 3D model, materials, lights and animation done in Blender
- Used CodeSandbox Cloud to put everything together in R3F (plus some custom scripts used on the Webflow page via data attritbutes)
- Loaded the generated JS bundle in Webflow using custom code

- YOUTUBE TUTORIAL: https://youtu.be/XOIU3mdR9Sc
- Link to the CodeSandbox template: https://codesandbox.io/p/sandbox/flowboard-r3f-b95nx9

Flowboard

Flowboard - Webflow + ThreeJS template

A keyboard-activated (⌘ + K) menu with arrow navigation.

Had a ton of fun building this project and after some great feedback, wanted to put it out for the community. Most of the functionality comes from the page code in the <head> tag, here's a quick breakdown of the four sections:

1) Initialization: Waits for the HTML and CSS to load before identifying 'modal' and 'closeButton' elements through IDs.

2) Keyboard Toggle: Listens for 'Command/Control + K' key press, toggling the 'modal' element's visibility between 'display: none' and 'display: flex'.

3) Close Button: Assigns functionality to a 'closeButton' element, working seamlessly with the keyboard toggle.

4) Arrow Key Navigation: Disables default arrow key behavior and focuses navigation on modal links, customizing the focused state for accessibility. Exclude links by assigning them the 'ignoreLink' ID.

Apply the 'modal' ID to the content container and 'closeButton' ID to the close element.

Enjoy, Will

Command Menu (⌘ + K)

At Roem, we are addicted to sounds. Based on the Tone JS Library by Yotam Mann, we created this minimal online synth keyboard, applied a DuoSynth sound and added some effects. A nice starting point for ourselves for a bigger project, that we thought would be nice to share with the Webflow Community.

Synth sounds with keyboard

Cloneable - synth audio with playable keyboard

Hi guys,
Recently, I was into Typing Racer Game, so I try to recreate into Webflow. Here is my attempt.

Shout-out to <Web Dev Junkie> and <Web Dev Simplified> Youtube Channels.

Type Racer

Type Racer Game

A growing accessible component library Accessible accordion, modals, amazon style menu and more. With instructions on how to implement them in your own projects. Uses @finsweet client first system and webflow javascript snippets

trm-accessible-components

Accessible Webflow Components

QWERTY keys is an experimental web audio/ digital synth project by Veeta Orinko using tone.js and react. 
The project is currently in beta (has a couple glitches) but will be evolving over time, with many more features to come:
* more control dials - harmonic distortion, wah, phaser, pitch shift and much much more
* screen optimised
* a sound library of different audio inputs
* record/ download options

follow me for updates: 
https://www.instagram.com/veetaorinko/

QWERTY Keys

Web Synth - Cloneable

Building a simple interactive keyboard game in Webflow with custom CSS and JavaScript for day 4 of the 'Advent of CSS' challenge.