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 Ciklobike CX-R in real time in the browser: pedalling, Di2 shifting, then the exploded view.
Drive-side technical drawing of a cyclocross bike with numbered parts and dimension linesDrive-side elevation drawn by the geometry solver: size 54, default build. The same code positions every part of the 3D model.10542978613Stack 558 mmReach 384 mmWheelbase 1,016 mm71.75°

The button pulls the drawing apart along the assembly directions. In the emulator every part separates this way.

Ciklobike CX-R · 54 · 2×12 · 48/31T · 11–34T The Ciklobike CX-R in real time in the browser: pedalling, Di2 shifting, then the exploded view. Drive-side elevation drawn by the geometry solver: size 54, default build. The same code positions every part of the 3D model.

Bill of materials (excerpt)

  1. Seatpost and saddle
  2. Frame: Ciklobike CX-R, carbon
  3. Bar, stem, shift-brake levers
  4. Fork, 12 mm thru-axle
  5. Front wheel, 700×33C
  6. Crankset 48/31T, pedals
  7. Chain, 112 links
  8. Rear derailleur, Di2
  9. Cassette 11–34T
  10. 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.

  1. See

    Every part is a separate model: chain links, spokes, cogs, bolts.

  2. Operate

    Pedalling, Di2 shifting and braking in real time: the chain runs, the wheel spins, then stops.

  3. 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

  1. Racers and coaches

    Try set-up changes without touching the race bike: frame size, cranks, stem, saddle, gearing.

  2. Mechanics and trainees

    Assembly order, interfaces and the Di2 power path, safely and as often as needed.

  3. Bike shops and fitters

    Show what shifting, braking or sizing changes at the counter, together with the customer.

  4. Teachers and students

    Gear ratios, levers, hydraulics and rotation on a working model, in Hungarian and English.

  5. Designers and 3D developers

    Procedural, parametric modelling in real time, in the browser.

  6. 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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Features of the Ciklobike emulator
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.

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.

Elevation, size 54Stack 558 mmReach 384 mmWheelbase 1,016 mm71.75°73.75°BB height 278 mmBB drop 66 mmChainstay 425 mmTrail 64 mm
Sheet 1/3 Elevation, size 54 Stack, reach, wheelbase, chainstay, bottom-bracket height, head and seat angles from the solver.
Dimensions as a table
Elevation, size 54
PropertyValue
Stack558 mm
Reach384 mm
Head angle71.75°
Seat angle73.75°
Wheelbase1,016 mm
BB height278 mm
Trail64 mm
475461
Sheet 2/3 Frame sizes: 47, 54 and 61 The smaller and larger sizes as ghosts behind the middle one. In the emulator the previous setup stays visible the same way after a size change.
Dimensions as a table
Frame sizes: 47, 54 and 61
SizeStackReachHead angleSeat angleWheelbase
47510 mm368 mm70.5°74.5°998 mm
54558 mm384 mm71.75°73.75°1,016 mm
61616 mm404 mm72.25°73°1,049 mm
48T · ⌀194 mm31T (hidden)34T11Tguide pulley 11Ttension pulley 13T
Sheet 3/3 Drivetrain: 48/31T and 11–34T Pitch circles, the chain path over the derailleur pulleys, gear ratios and development per crank revolution.
Dimensions as a table
Drivetrain: 48/31T and 11–34T
PropertyValue
Hardest gear48/11 = 4.36
Easiest gear31/34 = 0.91
Development per crank turn1.97 m – 9.43 m
Chain112 × 12.7 mm
Chainline (centre of the rings)47 mm

Use cases

Six situations where Ciklobike helps

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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