3D cyclocross emulator · free · in the browser
A cyclocross race bike, built from code
Ciklobike is a free 3D emulator of a professional cyclocross race bike that runs in your browser. Every part is generated in code from real technical data. Pedal it, shift the Shimano GRX Di2, brake, blow it apart into an exploded view and fit it to the crash-test dummy in the saddle.
No install, no sign-up. Needs a browser with WebGL2.
The button pulls the drawing apart along the assembly directions. In the emulator every part separates this way.
Bill of materials (excerpt)
- Seatpost and saddle
- Frame: Ciklobike CX-R, carbon
- Bar, stem, shift-brake levers
- Fork, 12 mm thru-axle
- Front wheel, 700×33C
- Crankset 48/31T, pedals
- Chain, 112 links
- Rear derailleur, Di2
- Cassette 11–34T
- Rear wheel, 160 mm rotor
- parts, 512 pieces in all
- 269
- chain links, each placed on the chain path
- 112
- technical sources
- 239
- downloaded 3D models
- 0
The problem
The knowledge is scattered
Understanding how a professional cyclocross bike works (electronic Di2 shifting, hydraulic brakes, chainline, derailleur geometry, sizing and riding position) still means piecing together manufacturer manuals, PDFs and videos. There was no single tool in which you can see, operate and take apart the whole bike while it shows real technical data.
See
Every part is a separate model: chain links, spokes, cogs, bolts.
Operate
Pedalling, Di2 shifting and braking in real time: the chain runs, the wheel spins, then stops.
Take apart
Exploded view, X-ray and blueprint modes, and a spec sheet with sources for each part.
Who it is for
One bike, six audiences
Racers and coaches
Try set-up changes without touching the race bike: frame size, cranks, stem, saddle, gearing.
Mechanics and trainees
Assembly order, interfaces and the Di2 power path, safely and as often as needed.
Bike shops and fitters
Show what shifting, braking or sizing changes at the counter, together with the customer.
Teachers and students
Gear ratios, levers, hydraulics and rotation on a working model, in Hungarian and English.
Designers and 3D developers
Procedural, parametric modelling in real time, in the browser.
Fans and journalists
Race-day tech explained (33 mm tyres, the pit, a high bottom bracket) with quotable answers.
How it works
From specifications to code to a working bike
Ciklobike downloads no ready-made 3D model. The bike is built in your browser every time it starts, in four steps.
Specifications
Dimensions gathered from 239 sources: frame geometry, tooth counts, chain pitch, spoke patterns, rotor diameters. Every number carries its source and a confidence level.
Code
Parametric functions solve the key points (axles, bottom bracket, head tube, seatpost) and build the geometry from them: tube profiles, tooth profiles, chain links.
Parts
Each component is a separate, tagged object with a name, material, mass, explode direction and sources. The exploded view and the spec sheets are built on this.
Emulator
A real-time model drives the cranks, chain, cassette, wheel and brakes; when you shift, the Di2 derailleur moves the chain.
Features
Feature list
Laid out like a bill of materials on a technical drawing: item, name, description and what it is based on.
| Item | Feature | What it does | Based on |
|---|---|---|---|
| 1 | Pedalling and freewheel | The cranks drive the rear wheel through the chain and cassette; stop pedalling and the wheel freewheels, then slows down. Workstand and ride modes, adjustable cadence. | 48/31T · 11–34T · 112 links |
| 2 | Di2 electronic shifting | One press, one cog: the rear derailleur moves and the chain steps to the next cog; at the front it moves between the two chainrings. | ST-RX825 · RD-RX825 · FD-RX825 (ref.) |
| 3 | Hydraulic disc brakes | The lever moves the caliper pistons, the pads clamp the rotor and the wheel slows down and stops. The right lever works the rear brake, the left lever the front. | BR-RX820 · 160 mm rotor (ref.) |
| 4 | Exploded view | Every part separates along its own assembly direction with a number and a label; one press puts it back together. Click any part to open its spec sheet. | assembly vector per part |
| 5 | X-ray and blueprint modes | X-ray makes the shells see-through (brake hoses, Di2 wire, battery, the full seatpost); blueprint turns the bike into a dimensioned technical drawing. | BT-DN300 (ref.) · ISO 128 line types |
| 6 | Night and lab looks | The night look is a floodlit race course, the lab look a light projector stage. Camera views: hero, side, drivetrain, cockpit, brakes and with the rider. | Night Rig · Lab · camera presets |
| 7 | Sizing | Frame size (47–61), cranks (160–175 mm), stem (60–130 mm), spacers, bar width, saddle height, setback and tilt, tyre width, 1× or 2×, cassette. | stack/reach chart, 7 sizes |
| 8 | Crash-test dummy | 3 dummy sizes are lowered onto the saddle from a hoist and pedal, with knee angle, hip angle, KOPS and LeMond saddle height readouts and an auto-fit. | Hybrid III 5F · 50M · 95M dimensions |
| 9 | Parts list and spec sheet | A searchable bill of materials (269 items, 8.7 kg) with Hungarian and English names. Isolate a part to read its spec sheet: reference model, material, mass, key dimensions and sources. | 79 researched components |
| 10 | Sound | Synthesised, switchable sounds: freewheel clicks, the Di2 motor, the shift clunk, brake squeal and the cleat clacking into the pedal. | Web Audio · synthesis |
| 11 | Share and screenshot | Share the configured bike as a link (the settings travel in the address) and save the current view as an image. | URL state · PNG |
| 12 | Bilingual, installable | Hungarian and English interface; installable web app (PWA) that also works from the keyboard. A short tour shows the main functions on first launch. Once opened, the emulator also starts without a connection. | PWA · service worker |
Views
Images from the running emulator
These images were captured from the real application with an automated browser.
Pedalling: the chain runs link by link over the cassette and the rear wheel spins.
Di2 shifting: the rear derailleur moves the chain to the next cog.
Braking: the pistons clamp the pads onto the rotor and the wheel stops.
Blueprint mode with dimension lines.
X-ray mode: brake hoses, Di2 wire, battery and the full seatpost.
Crash-test dummy in the saddle with bike-fit readouts.
Exploded view: every part separates along its own assembly direction, numbered.
Lab look: a light projector stage next to the bill of materials.
The emulator on a phone: the same bike, with the controls in the thumb zone.
Drawings from the same code
These sheets are drawn by the same geometry code that builds the 3D model. No dimension is typed in by hand: the code computes them.
Dimensions as a table
| Property | Value |
|---|---|
| Stack | 558 mm |
| Reach | 384 mm |
| Head angle | 71.75° |
| Seat angle | 73.75° |
| Wheelbase | 1,016 mm |
| BB height | 278 mm |
| Trail | 64 mm |
Dimensions as a table
| Size | Stack | Reach | Head angle | Seat angle | Wheelbase |
|---|---|---|---|---|---|
| 47 | 510 mm | 368 mm | 70.5° | 74.5° | 998 mm |
| 54 | 558 mm | 384 mm | 71.75° | 73.75° | 1,016 mm |
| 61 | 616 mm | 404 mm | 72.25° | 73° | 1,049 mm |
Dimensions as a table
| Property | Value |
|---|---|
| Hardest gear | 48/11 = 4.36 |
| Easiest gear | 31/34 = 0.91 |
| Development per crank turn | 1.97 m – 9.43 m |
| Chain | 112 × 12.7 mm |
| Chainline (centre of the rings) | 47 mm |
Use cases
Six situations where Ciklobike helps
-
Mechanic training without the grease
Instructors explode the bike to show assembly order and how parts connect: wheels and thru-axles, flat-mount calipers and rotors, Di2 derailleurs, cassette, chain and crankset. One press puts it back together, and X-ray mode shows what hides under the shells. Trainees can repeat the walkthrough on their own phones, with no stand, no tools and no risk to a customer’s bike.
-
Preview a position before a bike fit
Riders and coaches try different frame sizes, crank and stem lengths, saddle heights and setbacks while the pedalling crash-test dummy takes up the new posture. Geometry numbers become something you can see, and riders arrive at a fitter or shop with better questions.
-
A physics lesson on two wheels
Teachers use the working drivetrain to explain gear ratios (chainring teeth against cog teeth), levers (crank length), hydraulics (Pascal’s law in the brake) and rotational motion. The interface switches between Hungarian and English, so part names double as vocabulary practice.
-
Counter-side demo in bike shops
Shops run Ciklobike on a screen or tablet to show what electronic shifting, hydraulic disc brakes or a different crank length actually change. Customers explore the details themselves, then book a test ride, a service or a fit.
-
Understand cyclocross on race day
Why are tyres capped at 33 mm? Why do riders swap bikes in the pit as often as every lap when it is muddy? Why does the bottom bracket sit higher than on a road bike? Fans and journalists use the emulator, the FAQ and the glossary to explain race-day tech.
-
Procedural modelling for designers and developers
3D artists, product designers and creative developers see how a complete, moving product, down to chain links, spokes and cogs, is generated in real time from functions and parameters, and how every dependent part rebuilds when one parameter, such as frame size or crank length, changes.
FAQ
Frequently asked questions
What is Ciklobike, and is it free?
Ciklobike by DarwinAI is a free, browser-based 3D emulator of a professional cyclocross race bike. Every part is generated from code based on technical specifications: the carbon frame, the Shimano GRX Di2 12-speed drivetrain, hydraulic disc brakes, wheels, spokes, tyres, chain, pedals, cockpit, seatpost and saddle. You can pedal, shift, brake, explode it, inspect it in X-ray and blueprint modes, and resize it. Nothing to install, and it works in Hungarian and English.
Is Ciklobike a simulator?
No, it is an emulator. It reproduces how a cyclocross bike works and fits together: the cranks drive the chain, cassette and rear wheel, shifting moves the derailleur, and the brake stops the wheel. It uses simplified but plausible motion and does not calculate full physics such as tyre grip, aerodynamics or rider power.
How are the 3D parts made?
Procedurally. Functions and parameters (tube profiles, tooth counts, chain pitch, spoke patterns, rotor diameters) build each component from public technical specifications, drawings and manufacturer illustrations, not from scanned or downloaded meshes. That is why parts move independently, separate in the exploded view, and resize when you change frame size, crank length or stem length.
What is the difference between a cyclocross bike and a gravel bike?
A cyclocross (CX) bike is a drop-bar race bike for short, intense races (about an hour for elites) on laps of grass, mud, sand, stairs and barriers, where riders often dismount and run. Compared with a gravel bike it steers more quickly and has a shorter wheelbase, a higher bottom bracket and a lighter build. Its clearance is sized around the 33 mm UCI tyre limit plus room for mud, and it usually lacks luggage mounts. Gravel bikes take wider tyres (often 40 mm or more), with more stable, relaxed geometry and wider gear ranges.
Why are cyclocross tyres limited to 33 mm?
UCI equipment rule 1.3.018 says that in cyclo-cross a tyre may not be wider than 33 mm, measured at its widest point, and may not carry spikes or studs. The limit was introduced in 2010, in the same rule update that allowed disc brakes in cyclocross. It applies to UCI-sanctioned races, and many national and amateur series follow it too. Ciklobike shows a warning when you fit a wider tyre.
How does Shimano Di2 electronic shifting work?
Di2 (Digital Integrated Intelligence) replaces shift cables with electronic signals. Press a shift button and a small motor in the derailleur moves the chain to the next cog, with the same precision every time. In Shimano’s 12-speed GRX RX825 Di2 groupset, launched in 2024, the shift levers are wireless and run on coin-cell batteries. The derailleurs share one internal rechargeable battery, charged through a port on the rear derailleur. In Ciklobike you can shift while pedalling and watch the chain step across the cassette.
How do hydraulic disc brakes work, and what happens when I brake in Ciklobike?
Pulling the lever pushes a piston in the lever’s master cylinder. The incompressible fluid (Shimano uses mineral oil) carries that pressure through the hose to the caliper pistons, which clamp the pads onto a rotor fixed to the hub. The caliper pistons are larger than the lever piston, so a light finger force becomes a strong, controllable clamping force that stays consistent in mud and rain. In Ciklobike, if the wheels are spinning and you pull the brake lever, the rotor and wheel slow down and stop.
Can Ciklobike tell me my frame size or replace a bike fit?
No. It is a visual guide, not a fitting. You can change frame size, crank length, stem length, saddle height and saddle setback and see how the crash-test dummy’s posture changes while pedalling. Before buying, compare stack and reach on the manufacturer’s geometry chart. A common starting point for saddle height is inseam × 0.883, measured from the bottom-bracket centre to the top of the saddle (the LeMond method). For pain, injury or racing goals, see a qualified bike fitter.
What do the exploded view, X-ray and blueprint modes show?
The exploded view pulls every individual part apart along its assembly direction: frame, fork, wheels, spokes, tyres, cassette cogs, chain links, crankset, pedals, brakes, cockpit, seatpost and saddle. You see what each part is and where it goes, and one press reassembles it. X-ray mode makes the outer shells see-through to show what sits beneath, and blueprint mode renders the bike as a dimensioned technical drawing.
Which devices does it run on, and does it work offline?
It runs on desktops, laptops, tablets and phones in a browser with WebGL2 (current Chrome, Edge, Firefox and Safari all qualify). On weaker devices it renders with less detail; if the browser does not support WebGL2, the app says so clearly. Ciklobike is an installable web app: once you have opened the emulator, it also starts without a connection.
Does Ciklobike collect personal data?
No. There is no sign-up and the site uses no cookies. Visits are measured with cookieless, aggregate Umami statistics (for example, how many people started the emulator) that do not identify visitors. Settings such as the language stay on your device. The privacy notice has the details.
Is Ciklobike affiliated with Shimano or the UCI?
No. Ciklobike is an independent educational project designed and developed by DarwinAI. Shimano, GRX and Di2 are trademarks of Shimano Inc. They appear only to identify the real-world components the model is based on. UCI rules are cited for information.
Glossary
Glossary and sources
Short, quotable definitions of cyclocross tech, and the 239 sources the model’s dimensions come from.
- Stack
- Vertical distance from the centre of the bottom bracket to the top centre of the head tube. More stack means a higher handlebar and a more upright position.
- Reach
- Horizontal distance from the centre of the bottom bracket to the top centre of the head tube. Together with stack, it is the most reliable way to compare frame sizes across brands.
- Trail
- Distance along the ground between where the steering axis meets the ground and the front tyre’s contact point behind it. Head angle, fork offset and wheel size set it: more trail gives steadier steering, less trail gives quicker steering.
- Di2
- Digital Integrated Intelligence: Shimano’s electronic shifting, introduced in 2009 with Dura-Ace 7970. Buttons send signals and motors move the derailleurs. GRX Di2 is the gravel and cyclocross family; the 12-speed RX825 (2024) uses wireless shift levers and a central battery.
- Flat mount
- A disc-brake caliper mounting standard developed by Shimano for road, gravel and cyclocross frames. The caliper sits flat on the chainstay or fork and is bolted from below, a compact, clean fit for 140 and 160 mm rotors.
- Exploded view
- A technical illustration in which an assembly’s parts are pulled apart along their assembly axes while keeping their relative position and order. It shows what each part is and how it fits.
Start the emulator
No install, no sign-up, in English and Hungarian. Runs on desktop, tablet and mobile.
Start the emulator