Transform static images into interactive experiences in your React project. Add hoverable hotspots, clickable regions, and detailed overlays that showcase your content in depth.
Make your products or portfolio projects stand out with interactive images that engage your audience.
Explore these interactive image examples to see how Imagenix.Dev can transform the visual content of your React website
Interactive refrigerator image with hoverable components like doors, shelves, and controls
The doors are crafted from high-density polyethylene that is resistant to scratches and dents. They feature a dual-layer design with a thermal insulation layer that maintains optimal temperature control. The doors are equipped with energy-efficient LED lighting that illuminates the interior when opened, enhancing visibility and reducing energy consumption. The handles are made from a lightweight, durable material that can withstand heavy use without deforming or breaking.
Interactive vending machine image with hoverable components like dispensers, buttons, and displays
The dispenser lights up when the vending machine is dispensing a product.
Interactive phone image with hoverable components like camera, screen, and buttons
The screen is a high-resolution touchscreen display that allows users to control the phone's settings and view the camera, the weather, and other information.
Interactive refrigerator image with hoverable components like doors, shelves, and controls
The doors are crafted from high-density polyethylene that is resistant to scratches and dents. They feature a dual-layer design with a thermal insulation layer that maintains optimal temperature control. The doors are equipped with energy-efficient LED lighting that illuminates the interior when opened, enhancing visibility and reducing energy consumption. The handles are made from a lightweight, durable material that can withstand heavy use without deforming or breaking.
Interactive vending machine image with hoverable components like dispensers, buttons, and displays
The dispenser lights up when the vending machine is dispensing a product.
Interactive phone image with hoverable components like camera, screen, and buttons
The screen is a high-resolution touchscreen display that allows users to control the phone's settings and view the camera, the weather, and other information.
Interactive car image with hoverable components like tires, windows, and engine parts
High-performance alloy wheels designed for maximum traction and durability. Features advanced tire technology for superior handling on various road conditions.
Interactive car image with hoverable components like tires, windows, and engine parts
The windows are crafted from nano-crystalline glass that automatically tints based on sunlight intensity and can switch between transparent and opaque modes for privacy. Built-in augmented reality displays project navigation, speed, and vehicle diagnostics directly onto the windshield, creating an immersive driving experience. The glass is also embedded with solar cells that contribute to the vehicle's power system while maintaining 99.9% light transmission.
Interactive rocket image with hoverable components like engines, fins, and payload bay
High-thrust liquid fuel engine system with multiple firing stages. Capable of variable thrust control and includes emergency abort capabilities for crew safety.
Install the Imagenix.Dev package and start creating interactive images for your React projects in minutes
npm install @imagenix/imagenix-webThe @imagenix/imagenix-web package provides all the components and utilities you need to create interactive images in your React applications.
import React, { useState, useMemo } from 'react';
import { InteractiveImageRenderer } from '@imagenix/imagenix-web';
import { imageDataType } from '@imagenix/imagenix-web';
const MyInteractiveImage = () => {
const [activeGroup, setActiveGroup] = useState(null);
// Your image URL; this MUST be the same as the image you uploaded to the editor
const imageUrl = 'https://example.com/your-image.jpg';
const imageData = {
// Your exported JSON configuration here
};
// Event handlers for interactions
const eventHandlerMap = useMemo(() => ({
shapes: {
'your-group-name': {
handleClick: (event) => {
console.log('Clicked!', event);
setActiveGroup('your-group-name');
},
handleMouseEnter: (event) => {
console.log('Hovered!', event);
},
handleMouseLeave: (event) => {
console.log('Left!', event);
}
}
},
ellipses: {}
}), []);
return (
<InteractiveImageRenderer
frameKey="my-interactive-image"
imageUrl={imageUrl}
imageData={imageData}
eventHandlerMap={eventHandlerMap}
activeGroup={activeGroup}
width={800}
/>
);
};
export default MyInteractiveImage;Simple React components with comprehensive TypeScript support for seamless integration.
Handle clicks, hovers, and custom interactions with flexible event handling.
Lightweight and optimized for smooth interactions with large images.
Help improve Imagenix.Dev by contributing to our open source project or reporting issues
The Imagenix.Dev Interactive Image Renderer is completely open source and welcomes contributions from developers around the world. Whether you're interested in adding new features, improving performance, or fixing bugs, your contributions help make Imagenix.Dev better for everyone.
Feature Development: Add new capabilities and enhancements to the interactive image system
Performance Optimization: Help improve rendering speed and memory efficiency
Documentation: Improve guides, examples, and API documentation
Testing: Add comprehensive tests and improve code coverage
Found a bug or experiencing issues with the Interactive Image Renderer? We rely on our community to help identify and resolve problems. Use the GitHub Issues tab to report bugs, request features, or ask questions.
Bug Reports: Report rendering issues, performance problems, or unexpected behavior
Feature Requests: Suggest new functionality or improvements
Documentation Issues: Report unclear or missing documentation
Questions: Get help with implementation or usage questions
Treat all community members with respect and kindness in all interactions.
When reporting issues, include steps to reproduce and relevant code examples.
Keep discussions on-topic and relevant to the Imagenix.Dev project and interactive images.
Learn how to create your first interactive image with our comprehensive tutorial
Watch this demo to learn how to create interactive images using the editor and the imagenix-web npm package.
Interactive images keep users engaged 3x longer than static images, leading to better conversion rates and user satisfaction.
Provide intuitive, discoverable interfaces that guide users through complex information with visual cues and interactions.
Showcase detailed specifications, descriptions, and media without cluttering your interface or overwhelming users.
No complex coding required. Our intuitive editor and simple SDK make creating interactive images accessible to everyone.