All right, so take a look at the following code because what we need to do is we have opened the Chrome Dev Console on this code and what we want to do is in the console.log so we've opened DevTools, we've opened the console and as you can see it's a 3JS app so I've pasted the entire app contents here so analyze the app contents first, go through the major sections, tell me what's going on, tell me what the app is doing, figure all of that out and then figure out how the animations happen. So what we want to do is we want to console.log into the console how to rotate the stuff around in the screen. So I've pasted here the index.html, the app.js, the layout.js and the presets.js below.:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Cube with Depth of Field</title>
    <style>
        body { margin: 0; user-select: none; touch-action: none; }
        canvas { display: block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.module.js",
                "three/examples/jsm/controls/OrbitControls.js": "https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/controls/OrbitControls.js",
                "three/examples/jsm/postprocessing/EffectComposer.js": "https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/postprocessing/EffectComposer.js",
                "three/examples/jsm/postprocessing/RenderPass.js": "https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/postprocessing/RenderPass.js",
                "three/examples/jsm/postprocessing/BokehPass.js": "https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/postprocessing/BokehPass.js",
                "stats.js": "https://cdn.jsdelivr.net/npm/stats.js@0.17.0/src/Stats.js"
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/dat.gui/build/dat.gui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/TWEEN.min.js"></script>
    <script src="app.js" type="module"></script>
</body>
</html>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
import Stats from 'stats.js';
import { presets } from './presets.js';
const TWEEN = window.TWEEN;
import { Layout } from './layout.js';

const layoutSettings = {
    particleSize: 0.1,
    spacing: 2.0,
    offset: 0.0,
    layout: 0
};

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
stats.dom.style.zIndex = '1000'; // Ensure stats panel is above other elements
document.body.appendChild(stats.dom);
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
stats.dom.style.left = '0px';

const scene = new THREE.Scene();
scene.background = new THREE.Color(8421504);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 2000);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.touchAction = 'none'; // Prevent default touch actions
document.body.appendChild(renderer.domElement);
renderer.domElement.style.zIndex = '0'; // Ensure renderer is below GUI

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function getRandomEmoji() {
    const emojis = ['😀', '😂', '😍', '😎', '😢', '😡', '😱', '😴', '🤔', '🤖', '🎉', '🚀'];
    const randomIndex = Math.floor(Math.random() * emojis.length);
    return emojis[randomIndex];
}

function onDocumentMouseDown(event) {
    if (event.target.closest('.dg')) {
        // Click occurred on the dat.GUI panel, do nothing
        return;
        this.rotation = new THREE.Vector3(0, 0, 0);
        mesh.rotation.set(this.rotation.x, this.rotation.y, this.rotation.z);
        this.rotation = new THREE.Vector3(0, 0, 0);
        this.rotation = new THREE.Vector3(0, 0, 0);
        this.rotation = new THREE.Vector3(0, 0, 0);
    }


    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(particles.map(p => p.object));

    if (intersects.length > 0) {
        const intersectedParticle = particles.find(p => p.object === intersects[0].object);
        console.log(`Particle ID: ${intersectedParticle.id}, Name: ${intersectedParticle.name}`);
    } else {
        console.log("Background tapped");
    }
}

window.addEventListener('mousedown', onDocumentMouseDown, false);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Enable damping (inertia)
controls.dampingFactor = 0.25; // Damping factor
controls.screenSpacePanning = false; // Do not allow panning
controls.maxPolarAngle = Math.PI / 2; // Limit vertical rotation

const cameraSettings = {
    positionX: 0,
    positionY: 0,
    positionZ: 5,
    fov: 75,
    rotationX: 0,
    rotationY: 0,
    rotationZ: 0,
    aimAtCenter: true,
    targetX: 0,
    targetY: 0,
    targetZ: 0
};

const renderPass = new RenderPass(scene, camera);

const bokehPass = new BokehPass(scene, camera, {
    focus: 1,
    aperture: 0.025,
    maxblur: 0.008167485138278625,
    width: window.innerWidth,
    height: window.innerHeight
});

const composer = new EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(bokehPass); // Ensure BokehPass is added to the composer

const gui = new dat.GUI();
const bokehFolder = gui.addFolder('BokehPass');
bokehFolder.add(bokehPass.uniforms.focus, 'value', 0.0, 10.0).name('focus');
bokehFolder.add(bokehPass.uniforms.aperture, 'value', 0.0, 0.1).name('aperture');
bokehFolder.add(bokehPass.uniforms.maxblur, 'value', 0.0, 0.1).name('maxblur');
bokehFolder.close();

const bokehSettings = { enabled: true };
bokehFolder.add(bokehSettings, 'enabled').name('Enable Bokeh').onChange(value => {
    bokehPass.enabled = value;
});

class Particle {
    constructor(id, name, color, position, emoji, emojitags) {
        this.id = id;
        this.name = name;
        this.color = color;
        this.position = position;
        this.emoji = getRandomEmoji();
        this.emojitags = [];
        this.object = this.createMesh();
    }

    createMesh() {
        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.Float32BufferAttribute([0, 0, 0], 3));
        const textureLoader = new THREE.TextureLoader();
        const circleTexture = textureLoader.load('circle.png'); // Load the circular texture

        const material = new THREE.PointsMaterial({
            size: layoutSettings.particleSize,
            color: this.color,
            map: circleTexture,
            sizeAttenuation: true,
            opacity: 0.8,
            transparent: true,
            alphaTest: 0.1
        });
        const points = new THREE.Points(geometry, material);
        points.position.copy(this.position);
        points.frustumCulled = false; // Prevent culling
        return points;
    }

    updateRepresentation(representationType) {
        switch (representationType) {
            case 'points':
                {
                    const geometry = new THREE.BufferGeometry();
                    geometry.setAttribute('position', new THREE.Float32BufferAttribute([this.targetPosition.x, this.targetPosition.y, this.targetPosition.z], 3));
                    const textureLoader = new THREE.TextureLoader();
                    const circleTexture = textureLoader.load('circle.png'); // Load the circular texture
                    const material = new THREE.PointsMaterial({
                        color: this.color,
                        size: layoutSettings.particleSize,
                        map: circleTexture,
                        sizeAttenuation: true,
                        opacity: 0.8,
                        transparent: true,
                        alphaTest: 0.1
                    });
                    this.object = new THREE.Points(geometry, material);
                    this.object.position.copy(this.position);
                    this.object.frustumCulled = false; // Prevent culling
                }
                break;
            case 'image':
                {
                    const texture = new THREE.TextureLoader().load('circle3b.png');
                    this.object = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture }));
                    this.object.position.copy(this.position);
                }
                break;
            case 'mesh':
                const cubeGeometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
                const cubeMaterial = new THREE.MeshBasicMaterial({ color: this.color });
                this.object = new THREE.Mesh(cubeGeometry, cubeMaterial);
                this.object.position.copy(this.position);
                break;
            case 'emoji':
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                const size = 64; // Define a square size for the canvas
                canvas.width = size;
                canvas.height = size;
                context.font = `${size * 0.75}px Arial`; // Adjust font size to fit the canvas
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.fillText(this.emoji, size / 2, size / 2);
                const emojiTexture = new THREE.CanvasTexture(canvas);
                this.object = new THREE.Sprite(new THREE.SpriteMaterial({ map: emojiTexture }));
                this.object.position.copy(this.position);
                break;
        }
        this.object.position.copy(this.position);
    }
}

let particles = [];
function createParticles(numParticles) {
    // Remove existing particles from the scene
    particles.forEach(particle => scene.remove(particle.object));
    particles = [];

    for (let i = 0; i < numParticles; i++) {
        const position = new THREE.Vector3(
            (Math.random() - 0.5) * 10,
            (Math.random() - 0.5) * 10,
            (Math.random() - 0.5) * 10
        );
        const particle = new Particle(i, `Particle ${i}`, 0xffffff, position, '😀', ['happy']);
        particle.targetPosition = position.clone(); // Initialize targetPosition
        particles.push(particle);
        scene.add(particle.object);
    }
}

createParticles(1000); // Initial number of particles



const layout = new Layout(scene, particles);

const animationSettings = {
    frequency: 0.8,
    amplitude: 0.003,
    direction: 'up'
};

const animationFolder = gui.addFolder('Animation');
animationFolder.add(animationSettings, 'frequency', 0.001, 50.0).name('Frequency');
animationFolder.add(animationSettings, 'amplitude', 0.00001, 1.0).name('Amplitude');
animationFolder.add(animationSettings, 'direction', ['up', 'away from center', 'random', 'towards camera']).name('Direction');
animationFolder.close();


const particleSettings = {
    opacity: 0.8
};

const layoutFolder = gui.addFolder('Layout');
const particleFolder = gui.addFolder('Particle');
particleFolder.add(particleSettings, 'opacity', 0.0, 1.0).name('Opacity').onChange(value => {
    particles.forEach(particle => {
        particle.object.material.opacity = value;
    });
});
particleFolder.close();
const layoutController = layoutFolder.add({ layout: 0 }, 'layout', 0, layout.shapes.length - 1, 1).name('Layout');
layoutFolder.add(layoutSettings, 'spacing', 0.1, 10.0).name('Spacing').onChange(value => layout.updateLayoutSettings('spacing', value));
layoutFolder.add(layoutSettings, 'particleSize', 0.1, 5.0).name('Particle Size').onChange(value => layout.updateLayoutSettings('particleSize', value));
layoutController.onChange(value => {
    layout.changeShape(layout.shapes[value]);
    layout.currentShapeIndex = value;
});
layoutFolder.open();

const renderSettings = { mode: 'points' }; // Ensure initial mode is 'points'
const renderModes = ['points', 'image', 'mesh', 'emoji'];
const renderFolder = gui.addFolder('Render Mode');
renderFolder.add(renderSettings, 'mode', renderModes).name('Render Mode').onChange(value => {
    particles.forEach(particle => {
        // Remove the current object from the scene
        scene.remove(particle.object);
        // Update to the new representation
        particle.updateRepresentation(value);
        // Add the new object to the scene
        scene.add(particle.object);
    });
});
renderFolder.close();


const cameraFolder = gui.addFolder('Camera');
function updateCameraAim() {
    if (cameraSettings.aimAtCenter) {
        controls.target.set(0, 0, 0);
        controls.update();
    }
}

cameraFolder.add(cameraSettings, 'positionX', -50, 50).name('Position X').onChange(value => {
    camera.position.x = value;
    camera.updateProjectionMatrix();
    updateCameraAim();
});
cameraFolder.add(cameraSettings, 'positionY', -50, 50).name('Position Y').step(0.01).listen().onChange(value => {
    camera.position.y = value;
    camera.updateProjectionMatrix();
    updateCameraAim();
});
cameraFolder.add(cameraSettings, 'positionZ', -50, 50).name('Position Z').onChange(value => {
    camera.position.z = value;
    camera.updateProjectionMatrix();
    updateCameraAim();
});
cameraFolder.add(cameraSettings, 'fov', 10, 120).name('Field of View').onChange(value => {
    camera.fov = value;
    camera.updateProjectionMatrix();
});
const moreCameraFolder = cameraFolder.addFolder('More Camera');
moreCameraFolder.add(cameraSettings, 'rotationX', -Math.PI, Math.PI).name('Rotation X').step(0.01).listen().onChange(value => {
    camera.rotation.x = value;
});
moreCameraFolder.add(cameraSettings, 'rotationY', -Math.PI, Math.PI).name('Rotation Y').onChange(value => {
    camera.rotation.y = value;
});
moreCameraFolder.add(cameraSettings, 'rotationZ', -Math.PI, Math.PI).name('Rotation Z').onChange(value => {
    camera.rotation.z = value;
});
moreCameraFolder.add(cameraSettings, 'aimAtCenter').name('Aim at Center').onChange(value => {
    if (value) {
        controls.target.set(0, 0, 0);
    }
    camera.rotation.set(
        THREE.MathUtils.lerp(camera.rotation.x, cameraSettings.rotationX, 1),
        THREE.MathUtils.lerp(camera.rotation.y, cameraSettings.rotationY, 1),
        THREE.MathUtils.lerp(camera.rotation.z, cameraSettings.rotationZ, 1)
    );
    controls.target.set(
        THREE.MathUtils.lerp(controls.target.x, cameraSettings.targetX, 1),
        THREE.MathUtils.lerp(controls.target.y, cameraSettings.targetY, 1),
        THREE.MathUtils.lerp(controls.target.z, cameraSettings.targetZ, 1)
    );
    controls.update();
});
moreCameraFolder.add(cameraSettings, 'targetX', -50, 50).name('Target X').onChange(value => {
    controls.target.x = value;
    controls.update();
});
moreCameraFolder.add(cameraSettings, 'targetY', -50, 50).name('Target Y').onChange(value => {
    controls.target.y = value;
    controls.update();
});
moreCameraFolder.add(cameraSettings, 'targetZ', -50, 50).name('Target Z').onChange(value => {
    controls.target.z = value;
    controls.update();
});
moreCameraFolder.close();
cameraFolder.add({ reset: resetCameraPosition }, 'reset').name('Reset Camera Position');
cameraFolder.close();

function resetCameraPosition() {
    camera.position.set(0, 0, 5);
    cameraSettings.positionX = camera.position.x;
    cameraSettings.positionY = camera.position.y;
    cameraSettings.positionZ = camera.position.z;
    camera.updateProjectionMatrix();
    cameraSettings.rotationX = camera.rotation.x;
    cameraSettings.rotationY = camera.rotation.y;
    cameraSettings.rotationZ = camera.rotation.z;
    cameraSettings.targetX = controls.target.x;
    cameraSettings.targetY = controls.target.y;
    cameraSettings.targetZ = controls.target.z;
    cameraSettings.rotationX = camera.rotation.x;
    cameraSettings.rotationY = camera.rotation.y;
    cameraSettings.rotationZ = camera.rotation.z;
    cameraSettings.rotationX = camera.rotation.x;
    cameraSettings.rotationY = camera.rotation.y;
    cameraSettings.rotationZ = camera.rotation.z;
    if (cameraSettings.aimAtCenter) {
        controls.target.set(0, 0, 0);
        controls.update();
    }
    camera.rotation.set(
        THREE.MathUtils.lerp(camera.rotation.x, cameraSettings.rotationX, 1),
        THREE.MathUtils.lerp(camera.rotation.y, cameraSettings.rotationY, 1),
        THREE.MathUtils.lerp(camera.rotation.z, cameraSettings.rotationZ, 1)
    );
    controls.target.set(
        THREE.MathUtils.lerp(controls.target.x, cameraSettings.targetX, 1),
        THREE.MathUtils.lerp(controls.target.y, cameraSettings.targetY, 1),
        THREE.MathUtils.lerp(controls.target.z, cameraSettings.targetZ, 1)
    );
    controls.update();
    cameraFolder.updateDisplay();
    updateCameraAim();
}
function applyPreset(presetIndex) {
    const preset = presets[presetIndex];
    if (!preset) return;

    // Apply bokeh settings instantly
    bokehPass.uniforms.focus.value = preset.bokeh.focus;
    bokehPass.uniforms.aperture.value = preset.bokeh.aperture;
    bokehPass.uniforms.maxblur.value = preset.bokeh.maxblur;
    bokehFolder.updateDisplay();


    // Apply camera settings instantly
    Object.assign(cameraSettings, preset.camera);
    camera.position.set(
        THREE.MathUtils.lerp(camera.position.x, cameraSettings.positionX, 1),
        THREE.MathUtils.lerp(camera.position.y, cameraSettings.positionY, 1),
        THREE.MathUtils.lerp(camera.position.z, cameraSettings.positionZ, 1)
    );
    camera.fov = cameraSettings.fov;
    camera.updateProjectionMatrix();
    controls.update();
    Object.assign(layoutSettings, preset.layout);
    layout.updateLayoutSettings('particleSize', layoutSettings.particleSize);
    layout.updateLayoutSettings('spacing', layoutSettings.spacing);
    layout.changeShape(layout.shapes[layoutSettings.layout]);
    layoutFolder.updateDisplay();

    // Apply render mode settings instantly
    renderSettings.mode = preset.renderMode;
    particles.forEach(particle => {
        // Remove the current object from the scene
        scene.remove(particle.object);
        // Update to the new representation
        particle.updateRepresentation(renderSettings.mode);
        // Add the new object to the scene
        scene.add(particle.object);
    });
    renderFolder.updateDisplay();

    // Apply particle settings instantly
    Object.assign(particleSettings, preset.particle);
    particles.forEach(particle => {
        particle.object.material.opacity = particleSettings.opacity;
    });
    particleFolder.updateDisplay();

    // Apply animation settings instantly
    Object.assign(animationSettings, preset.animation);
    animationFolder.updateDisplay();
}

const presetFolder = gui.addFolder('Presets');
const presetSlider = presetFolder.add({ preset: 0 }, 'preset', 0, presets.length - 1, 1).name('Preset');
presetSlider.onChange(value => {
    applyPreset(value);
    const presetName = presets[value].exportName ? presets[value].exportName : `Preset ${value}`;
    presetNameLabel.innerText = presetName;
});

const presetNameLabel = document.createElement('div');
presetNameLabel.style.margin = '10px auto';
presetNameLabel.style.color = 'white';
presetNameLabel.style.fontSize = '14px';
presetNameLabel.style.backgroundColor = '#333'; // Off-black background
presetNameLabel.style.padding = '5px';
presetNameLabel.style.textAlign = 'center';
presetNameLabel.style.width = 'fit-content';
presetNameLabel.style.borderRadius = '5px';
presetNameLabel.innerText = `Preset 0`;
presetFolder.__ul.appendChild(presetNameLabel);
presetFolder.__ul.appendChild(presetNameLabel);
presetNameLabel.addEventListener('click', () => {
    const currentPresetIndex = parseInt(presetNameLabel.innerText.replace('Preset ', ''), 10);
    applyPreset(currentPresetIndex);
});
presetFolder.domElement.addEventListener('click', () => {
    presetNameLabel.style.display = presetFolder.closed ? 'none' : 'block';
});
presetFolder.open();

const exportNames = new Set();

function exportSettings() {
    let baseName = exportName.name.trim();
    if (!baseName) {
        baseName = 'export';
    }

    let finalName = baseName;
    const nameMatch = baseName.match(/^(.*?)(\d*)$/);
    let base = nameMatch[1];
    let counter = nameMatch[2] ? parseInt(nameMatch[2]) + 1 : 1;

    while (exportNames.has(finalName)) {
        finalName = `${base}${counter++}`;
        counter++;
    }
    exportName.name = finalName; // Update the export name in the GUI
    exportNames.add(finalName);
    const settings = {
        exportName: exportName.name,
        bokeh: {
            focus: bokehPass.uniforms.focus.value,
            aperture: bokehPass.uniforms.aperture.value,
            maxblur: bokehPass.uniforms.maxblur.value
        },
        scene: {
            backgroundColor: scene.background.getHex()
        },
        animation: {
            frequency: animationSettings.frequency,
            amplitude: animationSettings.amplitude,
            direction: animationSettings.direction
        },
        layout: {
            particleSize: layoutSettings.particleSize,
            spacing: layoutSettings.spacing,
            offset: layoutSettings.offset,
            layout: layout.currentShapeIndex
        },
        particle: {
            opacity: particleSettings.opacity
        },
        camera: {
            positionX: cameraSettings.positionX,
            positionY: cameraSettings.positionY,
            positionZ: cameraSettings.positionZ,
            fov: cameraSettings.fov,
            rotationX: cameraSettings.rotationX,
            rotationY: cameraSettings.rotationY,
            rotationZ: cameraSettings.rotationZ,
            aimAtCenter: cameraSettings.aimAtCenter,
            targetX: cameraSettings.targetX,
            targetY: cameraSettings.targetY,
            targetZ: cameraSettings.targetZ
        },
        renderMode: renderSettings.mode,
        bokehEnabled: bokehSettings.enabled,
        animationDirection: animationSettings.direction,
        layoutShape: layout.shapes[layout.currentShapeIndex]
    };
    const settingsString = JSON.stringify(settings, null, 2);
    navigator.clipboard.writeText(settingsString).then(() => {
        console.log('Settings copied to clipboard');
    }).catch(err => {
        console.error('Could not copy settings: ', err);
    });
}

const exportSettingsFolder = gui.addFolder('Export Settings');
const exportName = { name: 'p1' };
exportSettingsFolder.add(exportName, 'name').name('Export Name');
exportSettingsFolder.add({ export: exportSettings }, 'export').name('Export to Clipboard');
exportSettingsFolder.close();

window.addEventListener('keydown', (event) => {
    const activeElement = document.activeElement;
    const isTextInput = activeElement.tagName === 'INPUT' && activeElement.type === 'text';

    if (!isTextInput) {
        if (event.key === 'ArrowUp') {
            layout.cycleShape('up');
            layoutController.setValue(layout.currentShapeIndex);
        } else if (event.key === 'ArrowDown') {
            layout.cycleShape('down');
        } else if (event.key === 'ArrowLeft') {
            const newPresetIndex = (presetSlider.getValue() - 1 + presets.length) % presets.length;
            presetSlider.setValue(newPresetIndex);
        } else if (event.key === 'ArrowRight') {
            const newPresetIndex = (presetSlider.getValue() + 1) % presets.length;
            presetSlider.setValue(newPresetIndex);
        }
    }
});
controls.addEventListener('change', () => {
    cameraSettings.positionX = camera.position.x;
    cameraSettings.positionY = camera.position.y;
    cameraSettings.positionZ = camera.position.z;
    cameraFolder.updateDisplay();
});

function animate() {
    stats.begin();

    requestAnimationFrame(animate);

    stats.end();
    const time = Date.now() * 0.001;
    particles.forEach(particle => {
        particle.object.position.lerp(particle.targetPosition, 0.1);
        switch (animationSettings.direction) {
            case 'up':
                particle.object.position.y += Math.sin(time * animationSettings.frequency + particle.id) * animationSettings.amplitude;
                break;
            case 'away from center':
                const directionVector = particle.object.position.clone().normalize();
                particle.object.position.add(directionVector.multiplyScalar(animationSettings.amplitude * Math.sin(time * animationSettings.frequency + particle.id)));
                break;
            case 'random':
                const randomFactor = 0.1; // Adjust this factor to control smoothness
                particle.object.position.x += ((Math.random() - 0.5) * animationSettings.amplitude * Math.sin(time * animationSettings.frequency) - particle.object.position.x) * randomFactor;
                particle.object.position.y += ((Math.random() - 0.5) * animationSettings.amplitude * Math.sin(time * animationSettings.frequency) - particle.object.position.y) * randomFactor;
                particle.object.position.z += ((Math.random() - 0.5) * animationSettings.amplitude * Math.sin(time * animationSettings.frequency) - particle.object.position.z) * randomFactor;
                break;
            case 'towards camera':
                const toCamera = camera.position.clone().sub(particle.object.position).normalize();
                particle.object.position.add(toCamera.multiplyScalar(animationSettings.amplitude * Math.sin(time * animationSettings.frequency + particle.id)));
                break;
        }
    });
    composer.render();
}

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight);
}

animate();
import * as THREE from 'three';

export class Layout {
    constructor(scene, particles) {
        this.scene = scene;
        this.particles = particles;
        this.shapes = ['cube', 'sphere', 'torus', 'cylinder', 'grid'];
        this.currentShapeIndex = 0;
        this.createShapes();
        this.changeShape(this.shapes[this.currentShapeIndex]);
    }


    updateLayoutSettings(setting, value) {
        switch (setting) {
            case 'particleSize':
                this.particles.forEach(particle => {
                    if (particle.object instanceof THREE.Points) {
                        particle.object.material.size = value;
                    } else {
                        particle.object.scale.set(value, value, value);
                    }
                });
                break;
            case 'spacing':
                this.spacing = value;
                const targetPositions = this.calculateTargetPositions(this.shapes[this.currentShapeIndex]);
                this.particles.forEach((particle, index) => {
                    particle.targetPosition = targetPositions[index];
                });
                break;
        }
    }

    createShapes() {
        this.geometries = {
            cube: new THREE.BoxGeometry(1, 1, 1),
            sphere: new THREE.SphereGeometry(0.5, 16, 16),
            torus: new THREE.TorusGeometry(0.5, 0.2, 16, 100),
            cylinder: new THREE.CylinderGeometry(0.5, 0.5, 1, 16),
            grid: new THREE.PlaneGeometry(10, 10, 10, 10)
        };
    }

    calculateTargetPositions(shape) {
        const positions = [];
        const count = this.particles.length;
        const spacing = this.spacing || 2;

        for (let i = 0; i < count; i++) {
            let position;
            switch (shape) {
                case 'cube':
                    position = new THREE.Vector3(
                        (i % 10) * spacing - (spacing * 5) / 2,
                        Math.floor(i / 100) * spacing - (spacing * 5) / 2,
                        Math.floor((i % 100) / 10) * spacing - (spacing * 5) / 2
                    );
                    break;
                case 'sphere':
                    const phi = Math.acos(-1 + (2 * i) / count);
                    const theta = Math.sqrt(count * Math.PI) * phi;
                    position = new THREE.Vector3(
                        Math.cos(theta) * Math.sin(phi),
                        Math.sin(theta) * Math.sin(phi),
                        Math.cos(phi)
                    ).multiplyScalar(spacing * 5);
                    break;
                case 'torus':
                    const angle = (i / count) * Math.PI * 2;
                    position = new THREE.Vector3(
                        (spacing + Math.cos(angle)) * Math.cos(angle),
                        (spacing + Math.cos(angle)) * Math.sin(angle),
                        Math.sin(angle) * spacing
                    );
                    break;
                case 'cylinder':
                    position = new THREE.Vector3(
                        Math.cos((i / count) * Math.PI * 2) * 5,
                        (i % 10) * spacing - 5,
                        Math.sin((i / count) * Math.PI * 2) * 5
                    );
                    break;
                case 'grid':
                    position = new THREE.Vector3(
                        (i % 10) * spacing - 5,
                        0,
                        Math.floor(i / 10) * spacing - 5
                    );
                    break;
            }
            positions.push(position);
        }
        return positions;
    }

    changeShape(shape) {
        const targetPositions = this.calculateTargetPositions(shape);
        this.particles.forEach((particle, index) => {
            particle.targetPosition = targetPositions[index];
        });
    }

    cycleShape(direction) {
        if (direction === 'up') {
            this.currentShapeIndex = (this.currentShapeIndex + 1) % this.shapes.length;
        } else if (direction === 'down') {
            this.currentShapeIndex = (this.currentShapeIndex - 1 + this.shapes.length) % this.shapes.length;
        }
        this.changeShape(this.shapes[this.currentShapeIndex]);
    }
}
export const presets = [
{
  "exportName": "start",
  "bokeh": {
    "focus": 1,
    "aperture": 0.025,
    "maxblur": 0.008167485138278625
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.8,
    "amplitude": 0.003,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.1,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.8
  },
  "camera": {
    "positionX": 0,
    "positionY": 0,
    "positionZ": 5,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},


{
  "exportName": "wobbleSphere",
  "bokeh": {
    "focus": 3.023606444387008,
    "aperture": 0.010743516843284225,
    "maxblur": 0.018294994399931076
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 7.2163291117429145,
    "amplitude": 0.16869962005686223,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.38052468338071854,
    "spacing": 1.7819850090462654,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.8457396398724908
  },
  "camera": {
    "positionX": 0.0000015963047667098642,
    "positionY": 23.294953381890977,
    "positionZ": 0.00002324019501115718,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "sphere"
},

{
  "exportName": "LavaWobble",
  "bokeh": {
    "focus": 0.9270267941759283,
    "aperture": 0.030223141207891793,
    "maxblur": 0.018294994399931076
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.20798586456448695,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.38052468338071854,
    "spacing": 1.7819850090462654,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.8457396398724908
  },
  "camera": {
    "positionX": -0.0342394528044899,
    "positionY": 11.316751330495023,
    "positionZ": 0.9939217558499991,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "sphere"
},

{
  "exportName": "SmoothBubbles",
  "bokeh": {
    "focus": 0.5824071680882227,
    "aperture": 0.0640561729990523,
    "maxblur": 0.013681399155681917
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.1,
    "amplitude": 0.31326610752132333,
    "direction": "up"
  },
  "layout": {
    "particleSize": 1.0283277332644094,
    "spacing": 1.4924140604807445,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.15886964762643233
  },
  "camera": {
    "positionX": -0.8972860638593136,
    "positionY": 0.2902305719187539,
    "positionZ": 4.910259049655889,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "SmoothLavaBobble",
  "bokeh": {
    "focus": 0.5824071680882227,
    "aperture": 0.0640561729990523,
    "maxblur": 0.013681399155681917
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.1,
    "amplitude": 0.31326610752132333,
    "direction": "up"
  },
  "layout": {
    "particleSize": 1.0283277332644094,
    "spacing": 1.4924140604807445,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.15886964762643233
  },
  "camera": {
    "positionX": 0.0000035222712983583165,
    "positionY": 4.9999999999975016,
    "positionZ": 0.000003548746947973736,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},

{
  "exportName": "Raindrops",
  "bokeh": {
    "focus": 4.879813905401912,
    "aperture": 0.04293098991987594,
    "maxblur": 0.031769621779960365
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 12.906746876884638,
    "amplitude": 0.6661530757301628,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.1,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.6365124493839924
  },
  "camera": {
    "positionX": -5.438739423053822,
    "positionY": 0.6105507231874621,
    "positionZ": 6.307542052213456,
    "fov": 85.09132420091323,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "blurWave",
  "bokeh": {
    "focus": 0,
    "aperture": 0.015886964762643233,
    "maxblur": 0.09449039372792281
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 4.642502756957009,
    "amplitude": 0.13682262341690363,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.743159300422159,
    "spacing": 1.5823985525975706,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": 16.63917418256574,
    "positionY": 18.736558068675446,
    "positionZ": 19.39912389712868,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "CosmicConcentrator",
  "bokeh": {
    "focus": 3.4634272421814423,
    "aperture": 0.015886964762643233,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 2.36159722581201,
    "amplitude": 0.9639445321788576,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.743159300422159,
    "spacing": 1.5823985525975706,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": 18.185311958231434,
    "positionY": 19.05388879033827,
    "positionZ": 17.620740184849897,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "CosmicCube",
  "bokeh": {
    "focus": 3.4634272421814423,
    "aperture": 0.015886964762643233,
    "maxblur": 0.004673903678814508
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 2.36159722581201,
    "amplitude": 0.09271175239079865,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.743159300422159,
    "spacing": 1.5823985525975706,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": 18.185311958231434,
    "positionY": 19.05388879033827,
    "positionZ": 17.620740184849897,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "Cross",
  "bokeh": {
    "focus": 1.8002067717756525,
    "aperture": 0.04829413285086586,
    "maxblur": 0.034483501335401054
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 15.66364874644611,
    "amplitude": 0.26915523649521844,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.5002067717756526,
    "spacing": 3.2012664771258725,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.26914792797449816
  },
  "camera": {
    "positionX": 0.000027803251098983563,
    "positionY": 40.95455274744943,
    "positionZ": 0.000030085687448245716,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "StarTentacle",
  "bokeh": {
    "focus": 1.8002067717756525,
    "aperture": 0.04829413285086586,
    "maxblur": 0.03573705522529508
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.4,
    "amplitude": 0.5999867691910055,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 4.3737270612561385,
    "spacing": 4.906280692685448,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": 17.57341288165267,
    "positionY": 67.08936610683462,
    "positionZ": 39.43448024010828,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "BokehBreeze",
  "bokeh": {
    "focus": 0.415697423968295,
    "aperture": 0,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.9749291729128975,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 5.861139829413284,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.1491772206427156
  },
  "camera": {
    "positionX": -19.18194176671447,
    "positionY": 7.261549881624717,
    "positionZ": 51.52329132393586,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "FoggyMorn",
  "bokeh": {
    "focus": 1.8544843628844663,
    "aperture": 0.03057637632463169,
    "maxblur": 0.08225639700180926
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.9749291729128975,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 3.596532265012493,
    "spacing": 4.725032308089945,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.12578616352201258
  },
  "camera": {
    "positionX": 25.099523708356887,
    "positionY": 7.3004537216026675,
    "positionZ": 48.90852513160133,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "FogBall",
  "bokeh": {
    "focus": 10,
    "aperture": 0.03057637632463169,
    "maxblur": 0.08165331265615577
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.8,
    "amplitude": 0.9749291729128975,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 4.661006289308176,
    "spacing": 2.4370379943137763,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.12578616352201258
  },
  "camera": {
    "positionX": 25.099523708356887,
    "positionY": 7.3004537216026675,
    "positionZ": 48.90852513160133,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "HyperRings",
  "bokeh": {
    "focus": 4.264667872835358,
    "aperture": 0.03566813130007754,
    "maxblur": 0.004630826225553545
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.8,
    "amplitude": 0.003,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.1,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.8
  },
  "camera": {
    "positionX": 13.769901524259073,
    "positionY": 1.049591374453898,
    "positionZ": 6.937221537914573,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "RingBlur",
  "bokeh": {
    "focus": 3.2428706814853103,
    "aperture": 0.05415697423968296,
    "maxblur": 0.0379426208322564
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.8,
    "amplitude": 0.9528737373998449,
    "direction": "up"
  },
  "layout": {
    "particleSize": 1.2026794175928321,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.8
  },
  "camera": {
    "positionX": 4.960634310363911,
    "positionY": 14.342571610796268,
    "positionZ": -2.9188387305994596,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "BankNote",
  "bokeh": {
    "focus": 0,
    "aperture": 0.1,
    "maxblur": 0.1
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.2,
    "amplitude": 0.9528737373998449,
    "direction": "up"
  },
  "layout": {
    "particleSize": 1.2026794175928321,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": 12.793440794989497,
    "positionY": 0.992226501708674,
    "positionZ": 8.612794662688277,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "BankFour",
  "bokeh": {
    "focus": 0,
    "aperture": 0.04014818643921772,
    "maxblur": 0.04974584302576032
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.3277590247264581,
    "amplitude": 0.03757316360816749,
    "direction": "up"
  },
  "layout": {
    "particleSize": 1.2026794175928321,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": 12.793440794989497,
    "positionY": 0.992226501708674,
    "positionZ": 8.612794662688277,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "Chainmail",
  "bokeh": {
    "focus": 2.2245196863961403,
    "aperture": 0.016550357542862066,
    "maxblur": 0.1
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.2,
    "amplitude": 0.03757316360816749,
    "direction": "up"
  },
  "layout": {
    "particleSize": 2.744826397863359,
    "spacing": 2,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.26914792797449816
  },
  "camera": {
    "positionX": 12.73878851171453,
    "positionY": 0.8008840022607497,
    "positionZ": 8.713135186370025,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "RingMailGuard",
  "bokeh": {
    "focus": 9.452485569053158,
    "aperture": 0.016550357542862066,
    "maxblur": 0.08593951925562161
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.1,
    "amplitude": 0.6125221827345567,
    "direction": "up"
  },
  "layout": {
    "particleSize": 3.4882484707504093,
    "spacing": 0.9154044972861205,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.6264323253209271
  },
  "camera": {
    "positionX": 5.316531468916861,
    "positionY": 5.382588785481977e-16,
    "positionZ": 7.000445217085854,
    "fov": 120,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "FogRingMail",
  "bokeh": {
    "focus": 0,
    "aperture": 0.1,
    "maxblur": 0.1
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.08,
    "amplitude": 0.6125221827345567,
    "direction": "up"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 1.8911605065908503,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.20298095976565866
  },
  "camera": {
    "positionX": 8.788231814460943,
    "positionY": 0.04372219449634948,
    "positionZ": -0.19185943398356006,
    "fov": 120,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "RingFall",
  "bokeh": {
    "focus": 5.518221762729388,
    "aperture": 0.030895149478762818,
    "maxblur": 0.046054105281295776
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.08,
    "amplitude": 0.6125221827345567,
    "direction": "up"
  },
  "layout": {
    "particleSize": 2.7682562246919966,
    "spacing": 2.8737399844921168,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.21784268114069097
  },
  "camera": {
    "positionX": 4.0677155647434,
    "positionY": 0.030112063683979697,
    "positionZ": -0.19568886067319735,
    "fov": 113.3897647971052,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "RingRise",
  "bokeh": {
    "focus": 5.343758077022487,
    "aperture": 0.030895149478762818,
    "maxblur": 0.06110105970535023
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.08,
    "amplitude": 0.40342631558542263,
    "direction": "up"
  },
  "layout": {
    "particleSize": 2.9858792108210563,
    "spacing": 3.4196174722150428,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.21784268114069097
  },
  "camera": {
    "positionX": 17.683294563625367,
    "positionY": 0.031181288090560477,
    "positionZ": -0.18409504051208325,
    "fov": 50.16843284225037,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "HeartBeatBump",
  "bokeh": {
    "focus": 5.343758077022487,
    "aperture": 0.030895149478762818,
    "maxblur": 0.012578616352201259
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 7.944323511673991,
    "amplitude": 0.9308183018867925,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.587055225295081,
    "spacing": 3.4196174722150428,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.07064702334797966
  },
  "camera": {
    "positionX": 36.30718291817694,
    "positionY": 6.696909478407271,
    "positionZ": 32.7175104513983,
    "fov": 50.16843284225037,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "RingSwing",
  "bokeh": {
    "focus": 6.957008701645559,
    "aperture": 0.08304040665115879,
    "maxblur": 0.010459205651761868
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 3.533280520375635,
    "amplitude": 0.19196121219953477,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.587055225295081,
    "spacing": 3.4196174722150428,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.0485913672783665
  },
  "camera": {
    "positionX": 24.710212850488155,
    "positionY": 5.288068072180655,
    "positionZ": 1.6482451654046157,
    "fov": 50.16843284225037,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": false,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "Chainwatch",
  "bokeh": {
    "focus": 6.957008701645559,
    "aperture": 0.08304040665115879,
    "maxblur": 0.010459205651761868
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 4.08466089428793,
    "amplitude": 0.013363876970793487,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.0462694925476006,
    "spacing": 3.035370896872577,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.0485913672783665
  },
  "camera": {
    "positionX": 24.710212850488155,
    "positionY": 5.288068072180655,
    "positionZ": 1.6482451654046157,
    "fov": 11.705867149134143,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": false,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "RingBouncer",
  "bokeh": {
    "focus": 6.957008701645559,
    "aperture": 0.08304040665115879,
    "maxblur": 0.010459205651761868
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 2.4305197725510466,
    "amplitude": 0.02654544585164125,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.0462694925476006,
    "spacing": 3.035370896872577,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.0485913672783665
  },
  "camera": {
    "positionX": 4.606971171334614,
    "positionY": 7.49032822867959,
    "positionZ": -19.851117053427174,
    "fov": 11.705867149134143,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": false,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "SlinkyTowers",
  "bokeh": {
    "focus": 5.01070205479452,
    "aperture": 0.0247092271904885,
    "maxblur": 0.03683983802877574
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 5.187421642112518,
    "amplitude": 0.059628599121219955,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.0405703454811752,
    "spacing": 2.23667856681313,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.0643994464547256
  },
  "camera": {
    "positionX": -0.8964743002583176,
    "positionY": 124.18359855105967,
    "positionZ": -1.0263956912775465,
    "fov": 11.705867149134143,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "GreyRingHorizon",
  "bokeh": {
    "focus": 6.77808178455034,
    "aperture": 0.05710137188408351,
    "maxblur": 0.1
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 3.740850771822426,
    "amplitude": 0.02713912181802167,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 5.825658416277635,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": -60.549205078075694,
    "positionY": 3.182240665341444e-15,
    "positionZ": 21.657436212154625,
    "fov": 10,
    "rotationX": -3.14,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": -13.306962380055595,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "WaveGreyBeach",
  "bokeh": {
    "focus": 6.77808178455034,
    "aperture": 0.05710137188408351,
    "maxblur": 0.1
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 3.740850771822426,
    "amplitude": 0.02713912181802167,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 5.825658416277635,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 1
  },
  "camera": {
    "positionX": -151.70317648998173,
    "positionY": 9.344096397546727e-15,
    "positionZ": 64.29194251066443,
    "fov": 10,
    "rotationX": -3.14,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": -13.306962380055595,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "RingmailFade",
  "bokeh": {
    "focus": 6.77808178455034,
    "aperture": 0.05710137188408351,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.04860088136469372,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 5.825658416277635,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -210.67375709511256,
    "positionY": 151.15721236006056,
    "positionZ": -193.5675298206449,
    "fov": 10,
    "rotationX": -3.14,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0.06878069098561213,
    "targetY": -6.29494037179937,
    "targetZ": 1.9832679323044573
  },
  "renderMode": "image",
  "bokehEnabled": false,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "SlinkyTowers1",
  "bokeh": {
    "focus": 6.77808178455034,
    "aperture": 0.05710137188408351,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.04860088136469372,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.0405703454811752,
    "spacing": 1.3452830188679246,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -3.1693452701927876,
    "positionY": 35.704302727393745,
    "positionZ": 1.7568820516839179,
    "fov": 10,
    "rotationX": -3.14,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0.06878069098561213,
    "targetY": -6.29494037179937,
    "targetZ": 1.9832679323044573
  },
  "renderMode": "image",
  "bokehEnabled": false,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "RingWalk",
  "bokeh": {
    "focus": 3.350281618850693,
    "aperture": 0.0068668152838804175,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.03757316360816749,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.7703885586284139,
    "spacing": 1.3452830188679246,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.09270267941759283
  },
  "camera": {
    "positionX": -22.55886285063526,
    "positionY": 17.0004402280276,
    "positionZ": 28.812135252321394,
    "fov": 10,
    "rotationX": -3.14,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0.06878069098561213,
    "targetY": -6.29494037179937,
    "targetZ": 1.9832679323044573
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cube"
},
{
  "exportName": "upwash",
  "bokeh": {
    "focus": 0.8167485138278625,
    "aperture": 0.023606444387007843,
    "maxblur": 0.07433445334711812
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 38.82162445076247,
    "amplitude": 0.3573769785474283,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.7703885586284139,
    "spacing": 1.8566166968208841,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.2801757560093047
  },
  "camera": {
    "positionX": -4.178631398420177,
    "positionY": 2.745084098758452,
    "positionZ": 0.05960643321400861,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "sphere"
},
{
  "exportName": "SpinCycle",
  "bokeh": {
    "focus": 0.2653571120875334,
    "aperture": 0.043456534849659695,
    "maxblur": 0.05227879727750495
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 32.756440337727234,
    "amplitude": 0.09271175239079865,
    "direction": "up"
  },
  "layout": {
    "particleSize": 4.228715430343758,
    "spacing": 1.8566166968208841,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -1.204668295979966,
    "positionY": 0.35749018826760587,
    "positionZ": 4.839522193559308,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "sphere"
},
{
  "exportName": "GhostFog",
  "bokeh": {
    "focus": 1.5538037391229431,
    "aperture": 0.02452399414146636,
    "maxblur": 0.044985784440423886
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 2.981900146463341,
    "amplitude": 0.15887805892995607,
    "direction": "up"
  },
  "layout": {
    "particleSize": 4.228715430343758,
    "spacing": 3.563763246316878,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -1.204668295979966,
    "positionY": 0.35749018826760587,
    "positionZ": 4.839522193559308,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "sphere"
},
{
  "exportName": "GreyBobble",
  "bokeh": {
    "focus": 1.5538037391229431,
    "aperture": 0.02452399414146636,
    "maxblur": 0.044985784440423886
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.9969846084259498,
    "direction": "up"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 4.511372447660894,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -1.204668295979966,
    "positionY": 0.35749018826760587,
    "positionZ": 4.839522193559308,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cube"
},
{
  "exportName": "GreyBubbler",
  "bokeh": {
    "focus": 1.5538037391229431,
    "aperture": 0.02452399414146636,
    "maxblur": 0.0010209356422848281
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.14785034117342982,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 1.797079348668907,
    "spacing": 1.8911605065908503,
    "offset": 0,
    "layout": 0
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -0.4734918274976188,
    "positionY": 0.936359315246766,
    "positionZ": 2.6433643990918596,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "towards camera",
  "layoutShape": "cube"
},
{
  "exportName": "SnakeRipple",
  "bokeh": {
    "focus": 1.5538037391229431,
    "aperture": 0.02452399414146636,
    "maxblur": 0.0010209356422848281
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.864651995347635,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 1.797079348668907,
    "spacing": 2.5095373481519774,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": 2.1827477566770637,
    "positionY": 0.4904202416009764,
    "positionZ": -0.0711925455484674,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "towards camera",
  "layoutShape": "sphere"
},
{
  "exportName": "TheEye",
  "bokeh": {
    "focus": 1.5538037391229431,
    "aperture": 0.05048677522184889,
    "maxblur": 0.0238907555785302
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 33.58351089859568,
    "amplitude": 0.31326610752132333,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 9.94797105195141,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -0.00003568363154217295,
    "positionY": 35.71435386195276,
    "positionZ": 0.000002203609977459655,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "towards camera",
  "layoutShape": "cylinder"
},
{
  "exportName": "RingOfHole",
  "bokeh": {
    "focus": 1.4784181959162574,
    "aperture": 0.010373050745239941,
    "maxblur": 0.00485913672783665
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.8756797131041614,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 9.94797105195141,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": 0.00009966745846497264,
    "positionY": 99.6676228345992,
    "positionZ": -1.8101005357592842e-7,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "image",
  "bokehEnabled": false,
  "animationDirection": "towards camera",
  "layoutShape": "cylinder"
},
{
  "exportName": "DigitalTunnel",
  "bokeh": {
    "focus": 1.4784181959162574,
    "aperture": 0.010373050745239941,
    "maxblur": 0.00485913672783665
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 11.252605755147755,
    "amplitude": 0.9277167562677694,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 9.94797105195141,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": 0.00009468815100130705,
    "positionY": 94.68424169286806,
    "positionZ": -2.3809247071013384e-7,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "mesh",
  "bokehEnabled": false,
  "animationDirection": "towards camera",
  "layoutShape": "cylinder"
},
{
  "exportName": "SunBurst",
  "bokeh": {
    "focus": 6.493064530024984,
    "aperture": 0.054652364952184035,
    "maxblur": 0.011751529249590765
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 44.91911600758163,
    "amplitude": 1,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 1.2655811148444907,
    "spacing": 2.4370379943137763,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.13681399155681917
  },
  "camera": {
    "positionX": -0.00002755195025458775,
    "positionY": 27.71270054467765,
    "positionZ": 0.0000030203625105552806,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "towards camera",
  "layoutShape": "cylinder"
},
{
  "exportName": "TwinkleBass",
  "bokeh": {
    "focus": 1.1820453174808305,
    "aperture": 0.008749030757301627,
    "maxblur": 0.011751529249590765
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.3277590247264581,
    "amplitude": 0.390460131817007,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 0.5474885844748859,
    "spacing": 5.377100025846472,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.7940466959593349
  },
  "camera": {
    "positionX": 0.000014910858668505612,
    "positionY": 14.974837295690042,
    "positionZ": 0.0000016060151464923534,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": 0.15305168829444826,
    "rotationZ": 3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "towards camera",
  "layoutShape": "cylinder"
},
{
  "exportName": "RockRing",
  "bokeh": {
    "focus": 1.1820453174808305,
    "aperture": 0.008749030757301627,
    "maxblur": 0.011751529249590765
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 20.074691737744466,
    "amplitude": 0.004490010338588783,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.7163522012578617,
    "spacing": 0.7994055311449987,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.7940466959593349
  },
  "camera": {
    "positionX": 0.17193429749454547,
    "positionY": 8.221808424366202,
    "positionZ": 1.4526012075832797,
    "fov": 66.53528043422072,
    "rotationX": -3.141592653589793,
    "rotationY": -0.6875231467061563,
    "rotationZ": -3.141592653589793,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cylinder"
},
{
  "exportName": "TeleRing",
  "bokeh": {
    "focus": 6.485202894804859,
    "aperture": 0.084721235030585,
    "maxblur": 0.024544725165848196
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 26.139875850779703,
    "amplitude": 0.02512323103111269,
    "direction": "up"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 7.654512632463169,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.5006831814853105
  },
  "camera": {
    "positionX": 3.2214186561279945,
    "positionY": 50,
    "positionZ": -14.356070512161928,
    "fov": 120,
    "rotationX": -3.141592653589793,
    "rotationY": -0.6875231467061563,
    "rotationZ": -3.141592653589793,
    "aimAtCenter": true,
    "targetX": -50,
    "targetY": 50,
    "targetZ": 2.628052656962467
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cylinder"
},
{
  "exportName": "SideBlur",
  "bokeh": {
    "focus": 6.220384250883088,
    "aperture": 0.03683983802877574,
    "maxblur": 0.025037490846041184
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.17,
    "amplitude": 0.28018295425174466,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 9.182483159408115,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.5999827690186956
  },
  "camera": {
    "positionX": -50.00875444356955,
    "positionY": 50.071373674872305,
    "positionZ": 2.5922396494967486,
    "fov": 44.61614623718446,
    "rotationX": -3.141592653589793,
    "rotationY": -0.6875231467061563,
    "rotationZ": -3.141592653589793,
    "aimAtCenter": false,
    "targetX": -50,
    "targetY": 50,
    "targetZ": 2.628052656962467
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "sphere"
},
{
  "exportName": "EmojiRising",
  "bokeh": {
    "focus": 6.220384250883088,
    "aperture": 0.03683983802877574,
    "maxblur": 0.05448436288446628
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.17,
    "amplitude": 0.28018295425174466,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 5,
    "spacing": 9.182483159408115,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.5999827690186956
  },
  "camera": {
    "positionX": -50.02541708582488,
    "positionY": 50.00988238784641,
    "positionZ": 2.6258637388710793,
    "fov": 15.97016482510554,
    "rotationX": -3.141592653589793,
    "rotationY": -0.6875231467061563,
    "rotationZ": -3.141592653589793,
    "aimAtCenter": false,
    "targetX": -50,
    "targetY": 50,
    "targetZ": 2.628052656962467
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cylinder"
},
{
  "exportName": "EmojiRisingFun",
  "bokeh": {
    "focus": 6.220384250883088,
    "aperture": 0.03683983802877574,
    "maxblur": 0.05448436288446628
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.17,
    "amplitude": 0.23607208322563972,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.2598720734255193,
    "spacing": 6.85984508270871,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.8095115016800207
  },
  "camera": {
    "positionX": -50.02541708582488,
    "positionY": 50.00988238784641,
    "positionZ": 2.6258637388710793,
    "fov": 15.97016482510554,
    "rotationX": -3.141592653589793,
    "rotationY": -0.6875231467061563,
    "rotationZ": -3.141592653589793,
    "aimAtCenter": false,
    "targetX": -50,
    "targetY": 50,
    "targetZ": 2.628052656962467
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "cylinder"
},
{
  "exportName": "EmojiArmy",
  "bokeh": {
    "focus": 1,
    "aperture": 0.025,
    "maxblur": 0.008167485138278625
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.3277590247264581,
    "amplitude": 0.003,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.9835788748169209,
    "spacing": 1.1269320237787543,
    "offset": 0,
    "layout": 4
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": 2.428683386122515,
    "positionY": 1.690352196466037,
    "positionZ": 55.634880340599366,
    "fov": 112.14353407426553,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "grid"
},
{
  "exportName": "EmojiArmyPumped!",
  "bokeh": {
    "focus": 2.9865598345825797,
    "aperture": 0.012578616352201259,
    "maxblur": 0.002653571120875334
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 50,
    "amplitude": 0.015517728095115018,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.9835788748169209,
    "spacing": 1.017756526234169,
    "offset": 0,
    "layout": 4
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": 2.428683386122515,
    "positionY": 1.690352196466037,
    "positionZ": 55.634880340599366,
    "fov": 112.14353407426553,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "grid"
},
{
  "exportName": "EmojiArmyHappy",
  "bokeh": {
    "focus": 5.11760144740243,
    "aperture": 0.012578616352201259,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 10.70122538123546,
    "amplitude": 0.015517728095115018,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.9865339881106229,
    "spacing": 1.017756526234169,
    "offset": 0,
    "layout": 4
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": -1.8156377783662563,
    "positionY": 1.3447421212806738,
    "positionZ": 55.667682115711905,
    "fov": 112.14353407426553,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "grid"
},
{
  "exportName": "EmojiArmySmash",
  "bokeh": {
    "focus": 5.11760144740243,
    "aperture": 0,
    "maxblur": 0.016989747566123894
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.7433471000258465,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.9865339881106229,
    "spacing": 1.017756526234169,
    "offset": 0,
    "layout": 4
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": 2.7863438496878365,
    "positionY": 5.41288704249889e-15,
    "positionZ": 88.35523015168214,
    "fov": 112.14353407426553,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "grid"
},
{
  "exportName": "EmojiArmySideFun",
  "bokeh": {
    "focus": 9.165158955802532,
    "aperture": 0.068962694925476,
    "maxblur": 0.002653571120875334
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.48970959162574307,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 4.715042646678729,
    "spacing": 4.620547945205479,
    "offset": 0,
    "layout": 4
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": -9.629539281642456,
    "positionY": 1.7643205010664664,
    "positionZ": 171.92400494907045,
    "fov": 22.623416903592663,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "grid"
},
{
  "exportName": "Pizza",
  "bokeh": {
    "focus": 9.165158955802532,
    "aperture": 0.068962694925476,
    "maxblur": 0.009304729904368054
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7763786508141639,
    "amplitude": 0.7212916645127939,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 4.715042646678729,
    "spacing": 3.8563194623933836,
    "offset": 0,
    "layout": 2
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": 46.5546252139586,
    "positionY": 12.9068437050782,
    "positionZ": -103.52519672666801,
    "fov": 22.623416903592663,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "torus"
},
{
  "exportName": "EmojiHex",
  "bokeh": {
    "focus": 5.099508917032825,
    "aperture": 0.09359438270009478,
    "maxblur": 0
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 2.1095991642974066,
    "amplitude": 0.10373947014732489,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 2.229370207633325,
    "spacing": 3.8563194623933836,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.7799603687429999
  },
  "camera": {
    "positionX": 3.1202566134579017,
    "positionY": 1.4200936680940197,
    "positionZ": -12.11178382335997,
    "fov": 22.623416903592663,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "sphere"
},
{
  "exportName": "Reactor",
  "bokeh": {
    "focus": 5.8895494098388905,
    "aperture": 0.03819677780649608,
    "maxblur": 0.016989747566123894
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.3277590247264581,
    "amplitude": 0.48970959162574307,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.7703885586284139,
    "spacing": 0.5810545360558284,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.8456104075127079
  },
  "camera": {
    "positionX": -61.113300685217865,
    "positionY": 6.427162318122284,
    "positionZ": -5.892160695220867,
    "fov": 22.623416903592663,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "sphere"
},
{
  "exportName": "Fusion1",
  "bokeh": {
    "focus": 2.250366158352718,
    "aperture": 0.062203842508830876,
    "maxblur": 0.010373050745239941
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 4.636041268200224,
    "amplitude": 0.90876286637374,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 0.8784612733695184,
    "spacing": 1.563634013957095,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.21400878780046523
  },
  "camera": {
    "positionX": -49.77716536621096,
    "positionY": 5.234963877939791,
    "positionZ": -4.799201712483185,
    "fov": 29.901783406565002,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "sphere"
},
{
  "exportName": "RipplePond",
  "bokeh": {
    "focus": 2.250366158352718,
    "aperture": 0.062203842508830876,
    "maxblur": 0.0324287068148531
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.90876286637374,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 4.7690790040492805,
    "spacing": 1.563634013957095,
    "offset": 0,
    "layout": 1
  },
  "particle": {
    "opacity": 0.20298095976565866
  },
  "camera": {
    "positionX": -49.77716536621096,
    "positionY": 5.234963877939791,
    "positionZ": -4.799201712483185,
    "fov": 25.04953907125011,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "points",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "sphere"
},
{
  "exportName": "HorizonsEdge",
  "bokeh": {
    "focus": 2.250366158352718,
    "aperture": 0.062203842508830876,
    "maxblur": 0.06156962917290584
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.7937261516779706,
    "amplitude": 0.30807527129393114,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.9207213952259319,
    "spacing": 10,
    "offset": 0,
    "layout": 2
  },
  "particle": {
    "opacity": 0.31075486655509554
  },
  "camera": {
    "positionX": -15.907689597463225,
    "positionY": 26.77,
    "positionZ": -18.91570509997369,
    "fov": 25.04953907125011,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.219601771094179,
    "rotationZ": 3.043340361852459,
    "aimAtCenter": false,
    "targetX": -8.667384091112908,
    "targetY": -11.949600932651784,
    "targetZ": 12.55044390637611
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "torus"
},
{
  "exportName": "RingRingRun",
  "bokeh": {
    "focus": 0.5961919531317308,
    "aperture": 0.07984836736452142,
    "maxblur": 0.08756784698888603
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.01,
    "amplitude": 0.390460131817007,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 1.9207213952259319,
    "spacing": 10,
    "offset": 0,
    "layout": 2
  },
  "particle": {
    "opacity": 0.31075486655509554
  },
  "camera": {
    "positionX": -9.965376466320915,
    "positionY": -1.0160844617652867,
    "positionZ": -9.432946551926776,
    "fov": 26.262600155078832,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.371898580750365,
    "rotationZ": 0.0012439717929120242,
    "aimAtCenter": false,
    "targetX": -8.667384091112908,
    "targetY": -11.949600932651784,
    "targetZ": 12.55044390637611
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "torus"
},
{
  "exportName": "CosmicWeave",
  "bokeh": {
    "focus": 0.5961919531317308,
    "aperture": 0.08205393297148272,
    "maxblur": 0.09418454380976998
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.390460131817007,
    "direction": "away from center"
  },
  "layout": {
    "particleSize": 4.188696072413199,
    "spacing": 10,
    "offset": 0,
    "layout": 2
  },
  "particle": {
    "opacity": 0.12243217993452227
  },
  "camera": {
    "positionX": -9.851781016515645,
    "positionY": -1.1290815108358245,
    "positionZ": -9.479530906651537,
    "fov": 26.262600155078832,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.371898580750365,
    "rotationZ": 0.0012439717929120242,
    "aimAtCenter": false,
    "targetX": -10.242157357067697,
    "targetY": -10.242157357067697,
    "targetZ": 12.55044390637611
  },
  "renderMode": "image",
  "bokehEnabled": true,
  "animationDirection": "away from center",
  "layoutShape": "torus"
},
{
  "exportName": "CasinoTowerEmoji",
  "bokeh": {
    "focus": 4.345653484965969,
    "aperture": 0.054724048526751105,
    "maxblur": 0.0004480055139140175
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 20.468909859082885,
    "amplitude": 0.8430845417299366,
    "direction": "towards camera"
  },
  "layout": {
    "particleSize": 0.8169777666494357,
    "spacing": 5.4099446320108555,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.8708201408632722
  },
  "camera": {
    "positionX": 11.77047370178235,
    "positionY": 84.79272094933457,
    "positionZ": -18.6378155306547,
    "fov": 26.262600155078832,
    "rotationX": -3.0369985155364687,
    "rotationY": 1.371898580750365,
    "rotationZ": 0.0012439717929120242,
    "aimAtCenter": false,
    "targetX": -10.242157357067697,
    "targetY": -10.242157357067697,
    "targetZ": 12.55044390637611
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "towards camera",
  "layoutShape": "cylinder"
},
{
  "exportName": "EmojiSpiral",
  "bokeh": {
    "focus": 1,
    "aperture": 0.025,
    "maxblur": 0.008167485138278625
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.8791393986387526,
    "amplitude": 0.8425965598345826,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.8389894029464978,
    "spacing": 1.9508658568105455,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.8
  },
  "camera": {
    "positionX": 0.000004497134062042387,
    "positionY": 18.973885123009048,
    "positionZ": 0.00001843323362542238,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cylinder"
},
{
  "exportName": "EmojiHelix",
  "bokeh": {
    "focus": 1,
    "aperture": 0.035849056603773584,
    "maxblur": 0.023326440940811582
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.8791393986387526,
    "amplitude": 0.8425965598345826,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.8389894029464978,
    "spacing": 1.9508658568105455,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.5881795468251917
  },
  "camera": {
    "positionX": 11.175815250203366,
    "positionY": 1.9404438043234655e-15,
    "positionZ": 29.653800552510674,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "emoji",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cylinder"
},
{
  "exportName": "SpiralPortal",
  "bokeh": {
    "focus": 1,
    "aperture": 0.035849056603773584,
    "maxblur": 0.023326440940811582
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 1.7714479193590076,
    "amplitude": 0.8958397596278108,
    "direction": "up"
  },
  "layout": {
    "particleSize": 0.8389894029464978,
    "spacing": 1.9508658568105455,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.5881795468251917
  },
  "camera": {
    "positionX": 0.000012465179042123199,
    "positionY": 25.811582694616185,
    "positionZ": 0.000022602148407823233,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": 0,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cylinder"
},
{
  "exportName": "SpiralStargate",
  "bokeh": {
    "focus": 6.992332213319549,
    "aperture": 0.07023347979667442,
    "maxblur": 0.015886964762643233
  },
  "scene": {
    "backgroundColor": 8421504
  },
  "animation": {
    "frequency": 0.22499827690186958,
    "amplitude": 0.8958397596278108,
    "direction": "up"
  },
  "layout": {
    "particleSize": 1.0473248901524943,
    "spacing": 1.8911605065908503,
    "offset": 0,
    "layout": 3
  },
  "particle": {
    "opacity": 0.6810976135090894
  },
  "camera": {
    "positionX": 0.000012465179042123199,
    "positionY": 25.811582694616185,
    "positionZ": 0.000022602148407823233,
    "fov": 75,
    "rotationX": 0,
    "rotationY": 0,
    "rotationZ": -0.3115955048758239,
    "aimAtCenter": true,
    "targetX": 0,
    "targetY": 0,
    "targetZ": 0
  },
  "renderMode": "mesh",
  "bokehEnabled": true,
  "animationDirection": "up",
  "layoutShape": "cylinder"
}
]

Okay, so that is all of the code, but now what I want to do is in the console log, I try to open the console log here and I try to get it to either fire off a keyboard event where it moves the screen around, drives and moves, or something else. So the problem is that I can't get the screen to rotate programmatically, as you can see. So what I need from you is what command do I put in the console log, because I don't know what I'm doing here. I want the console.log to be able to move the particles on the screen around.

Particle ID: 343, Name: Particle 343
AnimationEffect.apply
ƒ apply() { [native code] }
app.js:69 Particle ID: 212, Name: Particle 212
2app.js:69 Particle ID: 411, Name: Particle 411
app.js:69 Particle ID: 421, Name: Particle 421
    Animation.call(window.KeyboardEvent.DOM_KEY_LOCATION_LEFT)
VM264:1 Uncaught TypeError: Failed to construct 'Animation': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at <anonymous>:1:15
(anonymous) @ VM264:1
2Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below and hit Enter to allow pasting.


Help me design a gradio app that uses an llm to output stuff to the console.log from llama3 8b and that stuff it outptus it moves the particles around in 3d in an iframe