React 3D Text Screensaver

The super useful package you always wished you had.

Features

- It can dispaly a rotating 3d text mimicking the one you could set in Windows.
- You can control the visibility of it with the visible prop.
- Set an inactivity timeout in seconds with the timeout prop to start the animation. Defaults to 30 sec (Only available if the visible prop is NOT set).

Installation

$3

``
yarn add react-3d-text-screensaver
`

$3

`
npm install react-3d-text-screensaver
`

Usage

`
import { ScreenSaver } from react-3d-text-screensaver';

function Component() {
...
return (

);
}
`

Properties

$3

Optional
Default: 30
Time in seconds before the screensaver is displayed.
Available only if visible is undefined.

$3

Required
The text of the screensaver.

$3

Otional
Properties controlling the aspects of the 3D text. By default the text is in the middle.
TextProperties:

`
TextProperties = {
direction: Direction;
rotationSpeed: number;
position: { x: number; y: number; z: number };
size: number;
height: number;
};

enum Direction {
clockwise = -1,
counterClockwise = 1,
}
`

$3

Optional
If set it controls the visibility of the component.

$3

Optional
If set the default class and styles are not applied to the container of the Component.
By default the container has these styles:

`
width: 100vw;
height: 100vh;
z-index: 100000;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000;
`

$3

Otional
Children are displayed under the text. It is advised to control the appearence with fixed` positioning, to keep the rotating text in the middle of the screen.

Author

Peter Kovacs