@benjos/create-boilerplate 1.5.0 → 1.5.2

package/template-vue/src/experiences/managers/threes/ThreeAssetsManager.ts

@@ -0,0 +1,263 @@
+import { Action, AssetUtils } from '@benjos/cookware';
+import {
+    DataTexture,
+    EquirectangularRefractionMapping,
+    LinearSRGBColorSpace,
+    RepeatWrapping,
+    Texture,
+    TextureLoader,
+    type ColorSpace,
+    type Mapping,
+    type Wrapping,
+} from 'three';
+import { DRACOLoader, Font, FontLoader, GLTFLoader, HDRLoader, type GLTF } from 'three/examples/jsm/Addons.js';
+import type { AssetId } from '../../constants/experiences/AssetId';
+import { AssetType } from '../../types/assetTypes';
+
+export interface ThreeAssetToLoad {
+    id: AssetId;
+    type: AssetType;
+    path: string;
+    option?: ThreeAssetOption;
+    loadedSize: number;
+    totalSize: number;
+}
+
+export interface ThreeAssetOption {}
+
+export interface ThreeTextureOption extends ThreeAssetOption {
+    colorSpace?: ColorSpace;
+    wrapping?: Wrapping;
+    repeatX?: number;
+    repeatY?: number;
+    centerX?: number;
+    centerY?: number;
+}
+
+export interface ThreeHDROption extends ThreeAssetOption {
+    mapping?: Mapping;
+    colorSpace?: ColorSpace;
+}
+
+export interface ThreeModelOption extends ThreeAssetOption {}
+
+export interface ThreeFontOption extends ThreeAssetOption {}
+
+class ThreeAssetsManager {
+    private static readonly _DRACO_LOADER_PATH: string = 'loaders/draco/';
+    private static readonly _DEFAULT_TEXTURE_OPTION_COLOR_SPACE: ColorSpace = LinearSRGBColorSpace;
+    private static readonly _DEFAULT_TEXTURE_OPTION_WRAPPING: Wrapping = RepeatWrapping;
+    private static readonly _DEFAULT_TEXTURE_OPTION_REPEAT_X: number = 1;
+    private static readonly _DEFAULT_TEXTURE_OPTION_REPEAT_Y: number = 1;
+    private static readonly _DEFAULT_TEXTURE_OPTION_CENTER_X: number = 0.5;
+    private static readonly _DEFAULT_TEXTURE_OPTION_CENTER_Y: number = 0.5;
+    private static readonly _DEFAULT_HDR_MAPPING: Mapping = EquirectangularRefractionMapping;
+    private static readonly _DEFAULT_HDR_COLOR_SPACE: ColorSpace = LinearSRGBColorSpace;
+    private static readonly _DEFAULT_LOADED_SIZE: number = 0;
+    private static readonly _DEFAULT_TOTAL_SIZE: number = -1;
+    private static readonly _DEFAULT_TEXTURE_TOTAL_SIZE: number = 1;
+
+    private readonly _assets: Map<string, Texture | DataTexture | GLTF | Font> = new Map<
+        string,
+        Texture | GLTF | Font
+    >();
+    private readonly _toLoadList: ThreeAssetToLoad[] = [];
+    private _expectedAssetsCount = 0;
+
+    private readonly _textureLoader = new TextureLoader();
+    private readonly _hdrLoader = new HDRLoader();
+    private readonly _gltfLoader = new GLTFLoader();
+    private readonly _dracoLoader = new DRACOLoader();
+    private readonly _fontLoader = new FontLoader();
+
+    public readonly onLoad = new Action();
+    public readonly onProgress = new Action();
+
+    public init(): void {
+        this._dracoLoader.setDecoderPath(AssetUtils.GetPath(ThreeAssetsManager._DRACO_LOADER_PATH));
+        this._gltfLoader.setDRACOLoader(this._dracoLoader);
+    }
+
+    public addTexture(id: AssetId, path: string, textureOption?: ThreeTextureOption): void {
+        this._toLoadList.push({
+            id,
+            type: AssetType.TEXTURE,
+            path,
+            option: textureOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TEXTURE_TOTAL_SIZE,
+        });
+        this._expectedAssetsCount++;
+    }
+
+    public addHDR(id: AssetId, path: string, hdrOption?: ThreeHDROption): void {
+        this._toLoadList.push({
+            id,
+            type: AssetType.HDR,
+            path,
+            option: hdrOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
+        });
+        this._expectedAssetsCount++;
+    }
+
+    public addModel(id: AssetId, path: string, modelOption?: ThreeModelOption): void {
+        this._toLoadList.push({
+            id,
+            type: AssetType.MODEL,
+            path,
+            option: modelOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
+        });
+        this._expectedAssetsCount++;
+    }
+
+    public addFont(id: AssetId, path: string, fontOption?: ThreeFontOption): void {
+        this._toLoadList.push({
+            id,
+            type: AssetType.FONT,
+            path,
+            option: fontOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
+        });
+        this._expectedAssetsCount++;
+    }
+
+    public beginLoad(): void {
+        if (this._toLoadList.length === 0) {
+            this.onLoad.execute();
+            return;
+        }
+        for (const asset of this._toLoadList) {
+            if (asset.type === AssetType.TEXTURE) this._loadTexture(asset);
+            else if (asset.type === AssetType.HDR) this._loadHDR(asset);
+            else if (asset.type === AssetType.MODEL) this._loadModel(asset);
+            else if (asset.type === AssetType.FONT) this._loadFont(asset);
+        }
+    }
+
+    public finishLoad(): void {
+        this._toLoadList.length = 0;
+    }
+
+    private _loadTexture(asset: ThreeAssetToLoad): void {
+        const option = asset.option as ThreeTextureOption | undefined;
+        this._textureLoader.load(
+            asset.path,
+            (texture) => {
+                texture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_COLOR_SPACE;
+                texture.wrapS = texture.wrapT = option?.wrapping ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_WRAPPING;
+                texture.repeat.set(
+                    option?.repeatX ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_REPEAT_X,
+                    option?.repeatY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_REPEAT_Y
+                );
+                texture.center.set(
+                    option?.centerX ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_X,
+                    option?.centerY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_Y
+                );
+                asset.loadedSize = asset.totalSize;
+                this._onLoad(asset.id, texture);
+            },
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.TEXTURE, asset.id, asset.path)
+        );
+    }
+
+    private _loadHDR(asset: ThreeAssetToLoad): void {
+        const option = asset.option as ThreeHDROption | undefined;
+        this._hdrLoader.load(
+            asset.path,
+            (dataTexture) => {
+                dataTexture.mapping = option?.mapping ?? ThreeAssetsManager._DEFAULT_HDR_MAPPING;
+                dataTexture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_HDR_COLOR_SPACE;
+                this._onLoad(asset.id, dataTexture);
+            },
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.HDR, asset.id, asset.path)
+        );
+    }
+
+    private _loadModel(asset: ThreeAssetToLoad): void {
+        this._gltfLoader.load(
+            asset.path,
+            (model) => this._onLoad(asset.id, model),
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.MODEL, asset.id, asset.path)
+        );
+    }
+
+    private _loadFont(asset: ThreeAssetToLoad): void {
+        this._fontLoader.load(
+            asset.path,
+            (font) => this._onLoad(asset.id, font),
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.FONT, asset.id, asset.path)
+        );
+    }
+
+    private _onLoad(id: AssetId, asset: Texture | GLTF | Font): void {
+        this._assets.set(id, asset);
+        this.onLoad.execute();
+    }
+
+    private _onProgress(asset: ThreeAssetToLoad, event: ProgressEvent): void {
+        if (asset.totalSize === ThreeAssetsManager._DEFAULT_TOTAL_SIZE) asset.totalSize = event.total;
+        asset.loadedSize = event.loaded;
+        this.onProgress.execute();
+    }
+
+    private _onError(type: AssetType, id: AssetId, path: string): void {
+        throw new Error(`ThreeAssetsManager: Failed to load ${type} with id '${id}' from path '${path}'`);
+    }
+
+    public getTexture(id: AssetId): Texture {
+        const asset = this._assets.get(id);
+        if (!asset) throw new Error(`Texture with id '${id}' not found!`);
+        return asset as Texture;
+    }
+
+    public getHDR(id: AssetId): DataTexture {
+        const asset = this._assets.get(id);
+        if (!asset) throw new Error(`HDR with id '${id}' not found!`);
+        return asset as DataTexture;
+    }
+
+    public getModel(id: AssetId): GLTF {
+        const asset = this._assets.get(id);
+        if (!asset) throw new Error(`Model with id '${id}' not found!`);
+        return asset as GLTF;
+    }
+
+    public getFont(id: AssetId): Font {
+        const asset = this._assets.get(id);
+        if (!asset) throw new Error(`Font with id '${id}' not found!`);
+        return asset as Font;
+    }
+
+    //#region Getters
+    //
+    public get isLoaded(): boolean {
+        return this._assets.size === this._expectedAssetsCount;
+    }
+    public get totalSize(): number {
+        let totalSize = 0;
+        for (const asset of this._toLoadList) {
+            totalSize += asset.totalSize;
+        }
+        return totalSize;
+    }
+    public get loadedSize(): number {
+        let loadedSize = 0;
+        for (const asset of this._toLoadList) {
+            loadedSize += asset.loadedSize;
+        }
+        return loadedSize;
+    }
+    //
+    //#endregion
+}
+
+export default new ThreeAssetsManager();

package/template-vue/src/experiences/managers/threes/ThreeCameraControllerManager.ts

@@ -0,0 +1,46 @@
+import { Action } from '@benjos/cookware';
+import type ThreeCameraControllerBase from '../../cameras/threes/bases/ThreeCameraControllerBase';
+import type { CameraId } from '../../constants/experiences/CameraId';
+
+class ThreeCameraControllerManager {
+    declare private _threeCameraControllers: Map<CameraId, ThreeCameraControllerBase>;
+    declare private _activeThreeCameraController: ThreeCameraControllerBase;
+
+    public readonly onActiveThreeCameraControllerChange = new Action();
+
+    public init(): void {
+        this._threeCameraControllers = new Map();
+        this._threeCameraControllers.clear();
+    }
+
+    public add(threeCameraController: ThreeCameraControllerBase, isActive = false): void {
+        this._threeCameraControllers.set(threeCameraController.cameraId, threeCameraController);
+        if (isActive) this.setActiveCamera(threeCameraController.cameraId);
+    }
+
+    public get(cameraId: CameraId): ThreeCameraControllerBase {
+        const threeCameraController = this._threeCameraControllers.get(cameraId);
+        if (!threeCameraController) {
+            throw new Error(`CameraControllerManager: No camera found with id ${cameraId}`);
+        }
+        return threeCameraController;
+    }
+
+    public setActiveCamera(cameraId: CameraId): void {
+        const threeCameraController = this.get(cameraId);
+        this._activeThreeCameraController?.disable();
+        this._activeThreeCameraController = threeCameraController;
+        this._activeThreeCameraController.enable();
+        this.onActiveThreeCameraControllerChange.execute();
+    }
+
+    //#region Getters
+    //
+    public get activeThreeCameraController(): ThreeCameraControllerBase {
+        return this._activeThreeCameraController;
+    }
+    //
+    //#endregion
+}
+
+export default new ThreeCameraControllerManager();

package/template-vue/src/experiences/managers/threes/ThreeRaycasterManager.ts

@@ -0,0 +1,21 @@
+import { DomPointerManager } from '@benjos/cookware';
+import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
+import MainThreeApp from '../../engines/threes/app/MainThreeApp';
+
+class ThreeRaycasterManager {
+    private readonly _raycaster = new Raycaster();
+    private readonly _pointerPosition = new Vector2();
+
+    public init(): void {
+        //
+    }
+
+    public castFromCameraToPointer(objects: Object3D[], recursive = true): Intersection<Object3D<Object3DEventMap>>[] {
+        this._pointerPosition.set(DomPointerManager.ndcX, DomPointerManager.ndcY);
+        this._raycaster.setFromCamera(this._pointerPosition, MainThreeApp.cameraController.camera);
+        const intersects = this._raycaster.intersectObjects(objects, recursive);
+        return intersects;
+    }
+}
+
+export default new ThreeRaycasterManager();

package/template-vue/src/experiences/materials/threes/loaders/LoaderMaterial.ts

@@ -0,0 +1,44 @@
+import gsap from 'gsap';
+import { Color, ShaderMaterial } from 'three';
+import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragmentShader.glsl';
+import LoaderVertexShader from '../../../shaders/threes/loaders/LoaderVertexShader.glsl';
+
+export default class LoaderMaterial extends ShaderMaterial {
+    private static readonly _DEFAULT_UNIFORMS_ALPHA: number = 1;
+    private static readonly _DEFAULT_UNIFORMS_COLOR: number = 0x3f79f3;
+    private static readonly _GSAP_DURATION_FADE_IN: number = 0.5;
+    private static readonly _GSAP_EASE_FADE_IN: string = 'power2.out';
+    private static readonly _GSAP_DURATION_FADE_OUT: number = 1.5;
+    private static readonly _GSAP_EASE_FADE_OUT: string = 'power2.in';
+
+    constructor() {
+        super({
+            transparent: true,
+            uniforms: {
+                uAlpha: { value: LoaderMaterial._DEFAULT_UNIFORMS_ALPHA },
+                uColor: { value: new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR) },
+            },
+            vertexShader: LoaderVertexShader,
+            fragmentShader: LoaderFragmentShader,
+        });
+    }
+
+    public async show(): Promise<void> {
+        gsap.killTweensOf(this.uniforms.uAlpha);
+        await gsap.to(this.uniforms.uAlpha, {
+            value: 1,
+            duration: LoaderMaterial._GSAP_DURATION_FADE_IN,
+            ease: LoaderMaterial._GSAP_EASE_FADE_IN,
+        });
+    }
+
+    public async hide(): Promise<void> {
+        gsap.killTweensOf(this.uniforms.uAlpha);
+        this.uniforms.uAlpha.value = 1;
+        await gsap.to(this.uniforms.uAlpha, {
+            value: 0,
+            duration: LoaderMaterial._GSAP_DURATION_FADE_OUT,
+            ease: LoaderMaterial._GSAP_EASE_FADE_OUT,
+        });
+    }
+}

package/template-vue/src/experiences/renderers/threes/LoaderRenderer.ts

@@ -0,0 +1,18 @@
+import { Camera, NoToneMapping, Scene, SRGBColorSpace, type WebGLRendererParameters } from 'three';
+import WebGLRendererBase from './bases/WebGLRendererBase';
+
+export default class LoaderRenderer extends WebGLRendererBase {
+    private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
+    private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
+    private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
+    private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
+    private static readonly _DEFAULT_CLEAR_ALPHA = 0;
+
+    constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
+        super(scene, camera, parameters);
+        this.toneMapping = LoaderRenderer._DEFAULT_TONE_MAPPING;
+        this.toneMappingExposure = LoaderRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
+        this.outputColorSpace = LoaderRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
+        this.setClearColor(LoaderRenderer._DEFAULT_CLEAR_COLOR, LoaderRenderer._DEFAULT_CLEAR_ALPHA);
+    }
+}

package/template-vue/src/experiences/renderers/threes/Renderer.ts

@@ -0,0 +1,71 @@
+import {
+    ACESFilmicToneMapping,
+    AgXToneMapping,
+    Camera,
+    CineonToneMapping,
+    CustomToneMapping,
+    LinearSRGBColorSpace,
+    LinearToneMapping,
+    NeutralToneMapping,
+    NoToneMapping,
+    PCFSoftShadowMap,
+    ReinhardToneMapping,
+    Scene,
+    SRGBColorSpace,
+    type ColorSpace,
+    type ToneMapping,
+    type WebGLRendererParameters,
+} from 'three';
+import { DebugGuiTitle } from '../../constants/experiences/DebugGuiTitle';
+import DebugManager from '../../managers/DebugManager';
+import WebGLRendererBase from './bases/WebGLRendererBase';
+
+export default class Renderer extends WebGLRendererBase {
+    private static readonly _DEFAULT_TONE_MAPPING = CineonToneMapping;
+    private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
+    private static readonly _DEFAULT_SHADOW_MAP_TYPE = PCFSoftShadowMap;
+    private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
+    private static readonly _DEFAULT_CLEAR_COLOR = 0xfafafa;
+    private static readonly _DEFAULT_CLEAR_ALPHA = 0;
+
+    constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
+        super(scene, camera, parameters);
+        this.toneMapping = Renderer._DEFAULT_TONE_MAPPING;
+        this.toneMappingExposure = Renderer._DEFAULT_TONE_MAPPING_EXPOSURE;
+        this.outputColorSpace = Renderer._DEFAULT_OUTPUT_COLOR_SPACE;
+        this.shadowMap.enabled = true;
+        this.shadowMap.type = Renderer._DEFAULT_SHADOW_MAP_TYPE;
+        this.setClearColor(Renderer._DEFAULT_CLEAR_COLOR, Renderer._DEFAULT_CLEAR_ALPHA);
+
+        if (DebugManager.isActive) {
+            const rendererFolder = DebugManager.getGuiFolder(DebugGuiTitle.THREE_RENDERER)
+            rendererFolder
+                .add(this, 'toneMapping', {
+                    NoToneMapping,
+                    LinearToneMapping,
+                    ReinhardToneMapping,
+                    CineonToneMapping,
+                    ACESFilmicToneMapping,
+                    CustomToneMapping,
+                    AgXToneMapping,
+                    NeutralToneMapping,
+                })
+                .onChange((value: ToneMapping) => {
+                    this.toneMapping = value;
+                });
+            rendererFolder.add(this, 'toneMappingExposure', 0, 10, 0.001);
+            rendererFolder
+                .add(this, 'outputColorSpace', { SRGBColorSpace, LinearSRGBColorSpace })
+                .onChange((value: ColorSpace) => {
+                    this.outputColorSpace = value;
+                });
+        }
+    }
+
+    public override update(dt: number): void {
+        const isDebug = DebugManager.isActive;
+        if (isDebug) DebugManager.beginThreePerf();
+        super.update(dt);
+        if (isDebug) DebugManager.endThreePerf();
+    }
+}

package/template-vue/src/experiences/renderers/threes/bases/WebGLRendererBase.ts

@@ -0,0 +1,29 @@
+import { DomResizeManager } from '@benjos/cookware';
+import { Camera, Scene, WebGLRenderer, type WebGLRendererParameters } from 'three';
+
+export default abstract class WebGLRendererBase extends WebGLRenderer {
+    private readonly _scene: Scene;
+    private _camera: Camera;
+
+    constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
+        super(parameters);
+
+        this._scene = scene;
+        this._camera = camera;
+
+        this.resize();
+    }
+
+    public setCamera(camera: Camera): void {
+        this._camera = camera;
+    }
+
+    public resize(): void {
+        this.setSize(DomResizeManager.width, DomResizeManager.height);
+        this.setPixelRatio(DomResizeManager.pixelRatio);
+    }
+
+    public update(_dt: number): void {
+        this.render(this._scene, this._camera);
+    }
+}

package/template-vue/src/experiences/shaders/threes/loaders/LoaderFragmentShader.glsl

@@ -0,0 +1,8 @@
+uniform vec3 uColor;
+uniform float uAlpha;
+
+void main() {
+    gl_FragColor = vec4(uColor, uAlpha);
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+}

package/template-vue/src/experiences/shaders/threes/loaders/LoaderVertexShader.glsl

@@ -0,0 +1,3 @@
+void main() {
+    gl_Position = vec4(position, 1.0);
+}

package/template-vue/src/experiences/styles/abstracts/_import.scss

@@ -0,0 +1,5 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'functions';
+
+// @use 'path/to/_import.scss' as *;

package/template-vue/src/experiences/styles/abstracts/functions.scss

@@ -0,0 +1,3 @@
+@function getAssetUrl($url) {
+    @return url('/assets/#{$url}');
+}

package/template-vue/src/experiences/styles/abstracts/variables.scss

@@ -0,0 +1,7 @@
+$white: #fafafa;
+$whiteAntiFlashs: #ededed;
+$darkGrey: #666666;
+$black: #050505;
+$jet: #333333;
+$silverGrey: #aaaaaa;
+$blue: #3f79f3;

package/template-vue/src/experiences/styles/commons/fonts.scss

@@ -0,0 +1,10 @@
+@use '../abstracts/import.scss' as *;
+
+// @font-face {
+//     font-family: 'din-condensed';
+//     src: getAssetUrl('fonts/din_bold_c.woff') format('woff'),
+//         getAssetUrl('fonts/din_bold_c.woff2') format('woff2');
+//     font-weight: bold;
+//     font-style: normal;
+//     font-display: swap;
+// }

package/template-vue/src/experiences/styles/commons/main.scss

@@ -0,0 +1,59 @@
+@use '../abstracts/import.scss' as *;
+
+$viewTransition: 0.5s;
+
+* {
+    box-sizing: border-box;
+    user-select: none;
+    overscroll-behavior: none;
+}
+
+body {
+    position: relative;
+    width: 100dvw;
+    height: 100dvh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    > #app,
+    > #root {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        > #loader {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        canvas,
+        #webgl {
+            width: 100%;
+            height: 100%;
+        }
+
+        .html-view {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity $viewTransition ease;
+
+            &.show {
+                opacity: 1;
+            }
+        }
+    }
+
+    .lil-gui,
+    #three-perf-ui {
+        z-index: 999999;
+    }
+}

package/template-vue/src/experiences/styles/commons/texts.scss

@@ -0,0 +1 @@
+@use '../abstracts/import.scss' as *;

package/template-vue/src/experiences/styles/style.scss

@@ -0,0 +1,7 @@
+@use './abstracts/import.scss' as *;
+
+@use './commons/main.scss';
+@use './commons/texts.scss';
+@use './commons/fonts.scss';
+
+@use './views/loader.scss';

package/template-vue/src/experiences/styles/views/loader.scss

@@ -0,0 +1,70 @@
+@use '../abstracts/import.scss' as *;
+
+$outroFadeOutDuration: 1.5s;
+
+body {
+
+    >#app,
+    >#root {
+        >#loader {
+            .html-view {
+                transition: opacity $outroFadeOutDuration ease;
+            }
+        }
+    }
+}
+
+#loader {
+    z-index: 999999;
+
+    .loading-screen {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100dvw;
+        height: 100dvh;
+
+        .loading-progress {
+            z-index: 2;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding-bottom: 2.5rem;
+            opacity: 1;
+            font-size: 2rem;
+            color: $white;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+
+        .loading-bar {
+            z-index: 1;
+            width: 100dvw;
+            height: 0.25rem;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            opacity: 1;
+            background-color: $white;
+            transform-origin: top left;
+            transform: translateY(-50%) scaleX(0);
+
+            &.ended {
+                transform-origin: top right;
+                animation: outBar $outroFadeOutDuration cubic-bezier(0.77, 0, 0.175, 1) forwards;
+
+                @keyframes outBar {
+                    0% {
+                        transform: translateY(-50%) scaleX(1);
+                    }
+
+                    100% {
+                        transform: translateY(-50%) scaleX(0);
+                    }
+                }
+            }
+        }
+    }
+}