Red Phoenix Technologies — Code. Create. Conquer.

Interactive Features

RPT Libraries

Selected locally integrated UI components with searchable previews, install notes, and copyable usage examples.

Text Animations

Aurora Text

Animated gradient text for hero copy, feature labels, and premium headings.

Source

Build Your Next Skill Fast

Install

npm install tailwindcss

Dependencies

tailwindcss

Usage Example

import { AuroraText } from "@/components/interactive-features/magicui/aurora-text";

export function Demo() {
  return <AuroraText className="text-4xl font-extrabold">Build Your Next Skill Fast</AuroraText>;
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.

Buttons

Shimmer Button

CTA button with a moving light sweep for enrollment and conversion sections.

Source

Install

npm install tailwindcss

Dependencies

tailwindcss

Usage Example

import { ShimmerButton } from "@/components/interactive-features/magicui/shimmer-button";

export function Demo() {
  return <ShimmerButton>Enroll Today</ShimmerButton>;
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.

Special Effects

Marquee

Continuously scrolling row for technologies, reviews, badges, or partner logos.

Source

Next.js

React

Cyber Security

DevOps

Install

npm install tailwindcss

Dependencies

tailwindcss

Usage Example

import { Marquee } from "@/components/interactive-features/magicui/marquee";

export function Demo() {
  return (
    <Marquee>
      <div className="rounded-full border px-4 py-2">Next.js</div>
      <div className="rounded-full border px-4 py-2">React</div>
      <div className="rounded-full border px-4 py-2">AI</div>
    </Marquee>
  );
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.

Cards

Magic Card

Spotlight card effect for services, plans, or featured offers.

Source

Featured Track

Full Stack Web Development

Learn frontend, backend, APIs, deployment, and real client workflows.

Install

npm install react tailwindcss

Dependencies

reacttailwindcss

Usage Example

import { MagicCard } from "@/components/interactive-features/magicui/magic-card";

export function Demo() {
  return (
    <MagicCard>
      <h3 className="text-2xl font-bold">Full Stack Web Development</h3>
      <p className="mt-2 text-sm text-muted-foreground">Learn frontend, backend, APIs, and deployment.</p>
    </MagicCard>
  );
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.

Background Effects

Grid Pattern

Decorative SVG-style grid backdrop for modern sections and dashboards.

Source

Background Layer

Modern Section Base

Install

npm install tailwindcss

Dependencies

tailwindcss

Usage Example

import { GridPattern } from "@/components/interactive-features/magicui/grid-pattern";

export function Demo() {
  return (
    <div className="relative min-h-48 overflow-hidden rounded-3xl bg-white">
      <GridPattern />
      <div className="relative z-10 p-6">Content here</div>
    </div>
  );
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.

Special Effects

Meteors

Ambient meteor streak effect for hero blocks and announcement cards.

Source

Launch Effect

Scholarship Deadline Tonight

Install

npm install tailwindcss

Dependencies

tailwindcss

Usage Example

import { Meteors } from "@/components/interactive-features/magicui/meteors";

export function Demo() {
  return (
    <div className="relative overflow-hidden rounded-3xl bg-slate-900 p-6">
      <Meteors />
      <div className="relative z-10 text-white">Scholarship Deadline Tonight</div>
    </div>
  );
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.

Cards

Neon Gradient Card

Soft atmospheric card container for testimonials, product cards, and feature callouts.

Source

Student Highlight

92% Placement Rate

Use this card style for premium proof sections and story-led content.

Install

npm install tailwindcss

Dependencies

tailwindcss

Usage Example

import { NeonGradientCard } from "@/components/interactive-features/magicui/neon-gradient-card";

export function Demo() {
  return (
    <NeonGradientCard>
      <h3 className="text-2xl font-bold">92% Placement Rate</h3>
      <p className="mt-2 text-sm text-muted-foreground">Use this card for premium proof sections.</p>
    </NeonGradientCard>
  );
}

Attribution: selected components are locally integrated from Magic UI, which is licensed under MIT.