The <mr-text>embeds text into an <mr-panel>.


Hello World! mr-panel { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100vw; height: 100vh; }


mr-text is made possible through Troika-Three-Text and can be manipulated with JavaScript like any other THREE.js.

Definition and Usage

<mr-text> supports custom fonts and has growing support CSS styling:

<mr-text class="title">MRjs</mr-text>
.title {
    font-family: 'Roboto';
    font-size: 6vw;
    line-height: 100%;
    text-align: center;
    color: rgba(24, 24, 24, 0.75);

Custom Fonts

Custom fonts are supported but must be loaded manually in css using @font-face

@font-face {
    font-family: 'Roboto';
    src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype');

Supported Properties