Hologram UI

ui tutorials

3/28/2024

Veneta Kochovska

This guide shows how to create a hologram effect like this one in Gameface:

demo

It uses CSS transform , filters , animations and box-shadow to achieve the glowing, transparent look with the moving particles.

The skewed circles are SVGs that have transform applied to them:

ellipse

1
<svg width="200" height="200" class="ellipse">
2
    <ellipse cx="100" cy="100" rx="75" ry="60" style="stroke:#00a6ffcc;stroke-width:15;"
3
        fill-opacity="0"></ellipse>
4
</svg>

The .ellipse class has rotate3d :

1
.ellipse {
2
    transform: rotate3d(1, 0, 0, 84deg);
3
}

The shadow underneath the ellipses are div elements with box-shadow:

ellipse shadow

1
.projector-circle-bottom {
2
    position: absolute;
3
    top: 439px;
4
    width: 150px;
5
    height: 120px;
6
    border: 2px transparent;
7
    border-radius: 150px;
8
    box-shadow: 0px 50px 100px 30px #00a6ffcc;
9
}

And they too have the .ellipse class which applies the transformation.

The light beams are absolutely positioned div elements that have box-shadow which creates the specific glow transparent effect:

light beams

To achieve pointy edges we use four vertically aligned elements that have different values for blur and spread-radius :

1
<div class="light-beam">
2
    <div class="glow-edge"></div>
3
    <div class="glow-middle"></div>
4
    <div class="glow-middle"></div>
5
    <div class="glow-edge"></div>
6
</div>

glow-middle has higher value for blur-radius giving it a bigger shadow, making the center of the light beam wider. And respectively glow-edge has a narrower shadow.

1
.glow-edge {
2
    width: 1px;
3
    height: 60px;
4
    background-color: rgb(0, 166, 255, 0.5);
5
    box-shadow: 0px 0px 55px 10px rgb(0, 166, 255, 0.5);
6
}
7


8
.glow-middle {
9
    width: 1px;
10
    height: 60px;
11
    background-color: rgb(0, 166, 255);
12
    box-shadow: 0px 0px 80px 20px rgb(0, 166, 255, 1);
13
}

The slightly lighter light beams have separate class .highlight that uses different color for the box shadow:

1
.highlight .glow-edge {
2
    background-color: rgb(129, 222, 255, 1);
3
    box-shadow: 0px 0px 100px 20px rgb(230, 249, 254, 0.7);
4
}

The image is an SVG with the logo that uses a CSS filter to change the color:

1
.hologram-bg {
2
    background: url(./assets/Master_full_white.svg);
3
    background-repeat: no-repeat;
4
    background-size: contain;
5
    filter: invert(29%) sepia(66%) saturate(1878%) hue-rotate(175deg);
6
}

The particle effects are generated using JavaScript and animated using CSS animation. Each particle has box-shadow that adds the glow effect:

particles

The generateParticles(count, diameterBoundaries, coordBoundaries) accepts 3 arguments:

  • the number of particles you want to generate
  • an array of lower and upper limit of the diameter
  • an array of lower and upper limit of the position coordinates

Example:

1
generateParticles(20, [2, 8], [150, 150]);

Will generate 20 particles with random size ranging from 2 to 8 pixels and will position them with top and left randomly chosen, not exceeding 150.

1
.particle {
2
    background-color: rgba(208, 235, 250, 0.5);
3
    box-shadow: 0px 0px 20px 10px rgb(0, 166, 255, 0.5);
4
}

The size of the particles is dynamic but within a given range. The position is also random, but again - within the boundaries of a container element. Each particle is a square div with border radius equal to its width to make it a circle. The animation is a vertical movement from the starting position to the top of the parent container:

1
function generateParticleAnimation(initialPosition, idx, animClassName) {
2
    const animName = `particle-anim-${idx}`;
3


4
    return `
5
    .${animClassName} {
6
        animation-duration: 6s;
7
        animation-name: ${animName};
8
        animation-iteration-count: infinite;
9
        animation-timing-function: linear;
10
    }
11
    @keyframes ${animName} {
12
        0% {
13
            top: ${initialPosition}px;
14
            opacity: 1;
15
        }
16
        50% {
17
            top: 10px;
18
            opacity: 0;
19
        }
20
        100% {
21
            top: ${initialPosition}px;
22
            opacity: 1;
23
        }
24
    }`;
25
}