ShineJS

Typography Options

Try different font families, weights, and styles with the shine effect.

Use this example to quickly compare how typography choices interact with the Shine component.

It also includes a content language switcher so you can test updates with English, Chinese, Hindi, Japanese, and Arabic text.

Font Family

Font Weight

Font Style

Content Language

Typography Shine

"use client";

import { Shine } from "@hazya/shinejs/react";

export function TypographyExample() {
  return (
    <Shine
      as="h1"
      style={{
        fontFamily: "Georgia, 'Times New Roman', serif",
        fontWeight: 700,
        fontStyle: "italic",
      }}
      options={{
        light: { position: "followMouse", intensity: 1.15 },
        config: {
          blur: 38,
          offset: 0.12,
          opacity: 0.32,
          shadowRGB: { r: 17, g: 24, b: 39 },
        },
      }}
    >
      Typography Shine
    </Shine>
  );
}