opensourceui.in

A lightweight React component library for creative text rendering.
The first release includes the Text component, which turns your text into an SVG with optional stroke outlines and a spotlight effect.

This package is available on npm as:

npm install opensource-ui

Text Component

The Text component renders text as SVG glyphs. Unlike plain HTML text, this approach gives you fine-grained control over stroke outlines, character spacing, and special effects. It also includes an optional spotlight effect that follows the cursor and highlights text with solid colors or animated gradients.

How it works

• Text is split into individual glyphs (characters) and rendered using SVG.
• You can apply stroke width, font family, weight, and padding to control appearance.
• The component ensures proper Unicode handling, so special characters and symbols render correctly.
• An optional spotlight effect can be enabled, which follows the mouse and lights up text with a chosen color or gradient theme.
• Several gradient presets are included, such as rainbow, ocean, fire, and cosmic.

Installation

Make sure you have React and React DOM installed in your project. Then install the package:

npm install opensource-ui

or

yarn add opensource-ui

Usage Example

import { Text } from "opensource-ui";

export default function App() {
  return (
    <div>
      <Text
        text="OpenSourceUI"
        fontSize={120}
        strokeWidth={2}
        fontColor="#000"
        spotlight={true}
        spotlightGradient={true}
        gradientTheme="cosmic"
      />
    </div>
  );
}

Using Poppins Font

By default, the Text component expects the Poppins font to be available in your project.
You must import it manually. The easiest way is to add the following to your index.html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />

Or, if you are using CSS imports:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

If you prefer another font, you can override it using the fontFamily prop.

Props

| Prop | Type | Default | Description | |--------------------|-----------------------|-------------|-----------------------------------------------------------------------------| | text | string \| number | "" | The text content to render. | | fontSize | number | 80 | Size of the text in pixels. | | strokeWidth | number | 2 | Thickness of the text outline (relative to font size). | | fontColor | string | "#000" | Color of the text (hex, rgb, or CSS color). | | fontFamily | string | "Poppins" | Font family for the text. | | fontWeight | string \| number | 700 | Font weight (e.g., "bold" or 400). | | padding | number | 12 | Extra spacing around each glyph. | | className | string | undefined | Custom class name for the container. | | style | CSSProperties | {} | Inline styles for the container. | | spotlight | boolean | false | Enables spotlight effect that follows the mouse. | | spotlightColor | string | "#3b82f6" | Solid color for spotlight when spotlightGradient is false. | | spotlightRadius | number \| null | null | Radius of the spotlight. Defaults to 1.5 × fontSize if not provided. | | spotlightFeather | number | 0.6 | Softness of the spotlight edges (0 = hard, 1 = fully soft). | | spotlightGradient| boolean | false | If true, uses a gradient instead of a solid color in spotlight. | | gradientTheme | GradientTheme | "rainbow" | Predefined gradient theme. Options: blue, rainbow, sunset, ocean, forest, fire, purple, gold, neon, cosmic. |

Gradient Themes

You can choose from several built-in gradient themes:

• blue
• rainbow
• sunset
• ocean
• forest
• fire
• purple
• gold
• neon
• cosmic

Notes

• If you do not import Poppins, the component will fall back to system fonts.
• Empty strings render as an invisible span instead of crashing.
• Performance is optimized with React.memo and memoized calculations.
• Works with any React project using TypeScript or JavaScript.

License

This project is open source and available under the MIT License.

Contact

If you have any questions, feedback, or suggestions, feel free to reach out:

• 📧 Email: [email protected]
• 💻 GitHub: https://github.com/bidyut10
• 🐦 Portfolio: https://bidyutkundu.netlify.app