Layer loaded from GeoJSON is the wrong size in Openlayers

I am trying to use OpenLayers to show some road features that I drew on a non geographical image in qgis. The output geojson I am using looks as follows (only one feature shown for demonstration).

{"type": "FeatureCollection",
"name": "roads",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "name": "Prospect Way", "type": "medium", "fwy": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 611.149016387208121, -4979.219450327811501 ], [ 705.113328259223067, -4984.793604421914097 ], [ 796.954152857294275, -4983.997296694185025 ], [ 899.943285643570562, -4978.954014418568477 ], [ 1019.654880712154409, -4970.990937141278664 ], [ 1172.015092617624987, -4972.05268077825076 ], [ 1256.423711756892772, -4979.219450327810591 ], [ 1326.49879179703953, -4979.750322146296639 ], [ 1430.018796401801865, -4978.954014418567567 ] ] ] } }, etc. etc.

These features were drawn in qgis over a 2d image. This is non geographical data from a fictional game world. When I try to load and show the geojson in Openlayers, it appears as a tiny little dot in the middle of the frame, which has to be zoomed into in order to see.
Images:
Regular, initial zoom value of 2
What it's meant to look like

This is my code. I've tried an assortment of different things - such as including projections, not including them, swapping them around. This code is from following simple tutorials so I don't understand why it doesn't work - when I try to load the image layer separately, it works at the correct scale just fine. Any help would be much appreciated - it's worth noting that yes, the Y axis in the geojson file is negative, that's something to do with how co-ordinates are referenced with raster images in qgis.

const extent = [0, 0, 4532, -5754];

const projection= new ol.proj.Projection({
            units: "pixels",
            extent: extent
        })

const image = new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: '/static/assets/geo/boulderbeta2.png',
        imageSize: [4532, 5754],
        projection: projection,
        imageExtent: extent

      })
    })


const roads = new ol.layer.Vector({
    title: 'Roads',
    source: new ol.source.Vector({
        url: '/static/assets/geo/roads.geojson',
        format: new ol.format.GeoJSON()
      })
  })
image.setZIndex(0);
roads.setZIndex(1);


roads.setStyle([
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#d21212',
            width: 2
         })
     })
 ]);



var map = new ol.Map({
    target: 'map',
    layers: [image,roads],
    view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 1.5,
        minZoom: -1,
        maxZoom:100
    }),
});

Edit: Added image layer and projection to code.