Interactive UI Elements
Relevant source files
The following files were used as context for generating this wiki page:- frontend/src/components/ParticleBackground.tsx
- frontend/src/components/LiquidLoader.tsx
- frontend/src/components/ScrollytellingSection.tsx
- frontend/src/components/AnimatedText.tsx
- frontend/src/components/InteractiveHero.tsx
- frontend/src/components/Chart3D.tsx
- frontend/src/components/DashboardView.tsx
- UI_UX_UPGRADE.md
The SPK Kajek frontend employs a suite of interactive UI elements to create a modern, dynamic, and engaging user experience. These components leverage libraries like Framer Motion for animations and Three.js for 3D graphics, transforming static displays into responsive and visually appealing interfaces. The primary goal is to provide clear visual feedback, guide the user through complex information, and enhance the overall aesthetic of the application.
These elements range from subtle background effects and loading animations to complex, data-driven 3D charts and scroll-based storytelling sections. They are key to the application's "world-class UI/UX design" and "professional presentation-ready" feel.
Sources: SUMMARY.md, UI_UX_UPGRADE.md
Core Animation & Interaction Components
The application is built with several standalone components dedicated to creating specific visual effects and interactions.
| Component | Description | Technologies |
|---|---|---|
AnimatedText.tsx | Animates text content, typically for headings. | Framer Motion |
ParticleBackground.tsx | Renders an animated particle effect using a canvas. | React, Framer Motion |
LiquidLoader.tsx | A custom SVG-based loading animation with a liquid effect. | Framer Motion |
InteractiveHero.tsx | A full-screen hero section that reacts to mouse movement. | Framer Motion |
ScrollytellingSection.tsx | A scroll-triggered component that reveals content in stages. | Framer Motion |
Chart3D.tsx | A 3D bar chart for data visualization that responds to mouse movement. | Three.js, WebGL |
DashboardView.tsx | Contains smaller interactive card components like TiltCard and SpotlightCard. | Framer Motion, React Hooks |
Sources: DASHBOARD_README.md, frontend/src/components/DashboardView.tsx
AnimatedText
This component is used for animating headings and other text elements. It takes a text prop and applies a motion effect.
Sources: frontend/src/components/AnimatedText.tsx, frontend/src/components/InteractiveHero.tsx:49-54
ParticleBackground
The ParticleBackground component renders a subtle, animated background of floating particles. It is used in views like the main dashboard and loading screens to add depth and visual interest without being distracting.
The component uses Framer Motion to animate the scale and opacity of each particle, creating a gentle pulsing effect. The number of particles can be configured via the particleCount prop.
The diagram below shows the animation loop for a single particle.
This diagram illustrates the continuous animation cycle for each particle in the background.
Sources: frontend/src/components/ParticleBackground.tsx, frontend/src/components/DashboardView.tsx:32
LiquidLoader
LiquidLoader provides a custom loading animation, indicating that data is being fetched or processed. It uses SVG paths and Framer Motion's animate function to create a fluid, morphing shape effect. This provides a more polished user experience than a standard spinner.
Sources: frontend/src/components/LiquidLoader.tsx, frontend/src/components/DashboardView.tsx:34
InteractiveHero
This component creates a full-screen, immersive hero section. It responds to the user's mouse position to create a parallax effect on the main text and a dynamic radial gradient in the background. It also features floating orb elements animated with Framer Motion to create a sense of depth and movement.
The following sequence diagram shows how mouse movement triggers visual updates in the InteractiveHero component.
This diagram shows the flow of events from user mouse movement to the visual response of the hero section.
Sources: frontend/src/components/InteractiveHero.tsx, SUMMARY.md
Data-Driven Interactive Elements
These components combine data with user interaction to create rich visualizations.
ScrollytellingSection
This component guides the user through a narrative by linking animations to their scroll progress. It is used on the dashboard to explain the TOPSIS process in four steps: Data Collection, Criteria Analysis, TOPSIS Calculation, and Best Recommendation.
It utilizes Framer Motion's useScroll and useTransform hooks to track the scrollYProgress within its container and map it to visual properties like opacity, scale, and y position. As the user scrolls, the content for the current step fades in and moves into view, while the previous step fades out.
The logic flow is as follows:
This flowchart shows how scroll progress is translated into step-by-step content visibility.
The steps are defined in an array within the component:
// frontend/src/components/ScrollytellingSection.tsx:16-36
const steps = [
{
title: "Data Collection",
description: "Mengumpulkan data dari berbagai vendor VPS",
icon: BarChart3,
color: "from-blue-500 to-cyan-500"
},
{
title: "Kriteria Analysis",
description: "Menentukan bobot untuk CPU, RAM, Disk I/O, dan Harga",
icon: Target,
color: "from-purple-500 to-pink-500"
},
{
title: "TOPSIS Calculation",
description: "Menghitung score menggunakan metode TOPSIS",
icon: TrendingUp,
color: "from-green-500 to-emerald-500"
},
{
title: "Best Recommendation",
description: results ? `${results.top_recommendation?.Vendor} adalah pilihan terbaik` : "Menentukan rekomendasi terbaik",
icon: Award,
color: "from-yellow-500 to-orange-500"
}
];
Sources: frontend/src/components/ScrollytellingSection.tsx
Chart3D
The Chart3D component renders an interactive 3D bar chart using Three.js to visualize vendor rankings. This provides a multi-dimensional view of the analysis results.
Key features include:
- 3D Scene: A standard Three.js setup with a scene, perspective camera, lighting (ambient and directional), and a grid helper.
- Data-Driven Bars: For each data point, a
THREE.BoxGeometryis created. The height of the bar is proportional to the vendor'sscore. - Bar Animation: On creation, bars animate their scale on the Y-axis from 0 to their target height, with a staggered delay for each bar.
- Interactive Camera: The camera's position is updated based on the user's mouse coordinates, allowing the user to rotate the view around the chart.
- Labels: Vendor names and scores are rendered as
THREE.Spriteobjects using aCanvasTexture, positioned above each bar.
The component's structure can be visualized as follows:
This diagram outlines the structure and key elements of the Chart3D component.
Sources: frontend/src/components/Chart3D.tsx, UI_UX_UPGRADE.md
Dashboard Card Interactions
The DashboardView component contains several smaller, but highly interactive, card components that respond to mouse input.
TiltCard
This card, used for the main "Mulai Analisa" call-to-action, tilts in 3D space based on the mouse position within its bounds. It achieves this by applying a perspective and rotateX/rotateY CSS transform in its onMouseMove handler. This creates an engaging, tactile feel.
Sources: frontend/src/components/DashboardView.tsx:313-341
SpotlightCard
Used for the main statistic cards, this component features a "spotlight" effect that follows the mouse. It works by rendering a div with a radial-gradient background whose position is updated on mouse move. This highlights the card the user is currently focused on.
Sources: frontend/src/components/DashboardView.tsx:266-311
Summary
The interactive UI elements in SPK Kajek are central to its design philosophy. By combining the animation capabilities of Framer Motion with the 3D power of Three.js and clever use of React hooks, the application delivers a polished, responsive, and professional user experience. These elements not only enhance the visual appeal but also improve usability by providing clear feedback and guiding the user through the application's features and data.
Sources: SUMMARY.md, UI_UX_UPGRADE.md