Performance
Performance
Performance
STATS
STATS
STATS
1025
1025
1025
HP
HP
HP
SUPERCHARGED
SUPERCHARGED
SUPERCHARGED
V8
V8
V8
0-60
0-60
0-60
IN 2.3 Sec
IN 2.3 Sec
IN 2.3 Sec
Top Speed
Top Speed
Top Speed
211MPH
211MPH
211MPH
DESIGN BREAKDOWN
DESIGN BREAKDOWN
DESIGN BREAKDOWN
01
01
01
CONCEPT
CONCEPT
CONCEPT
02
02
02
gathering assets
gathering assets
gathering assets
03
03
03
tools used
tools used
tools used
04
04
04
problems faced
problems faced
problems faced
05
05
05
solutions
solutions
solutions
06
06
06
optimizations
optimizations
optimizations
07
07
07
designing
designing
designing
08
08
08
final thoughts
final thoughts
final thoughts
concept
concept
concept
The goal was simple: to create a bold, high-impact hero section that instantly grabs attention. I wanted it to feel alive aggressive, sleek, and interactive much like the Dodge Demon itself. Rather than settling for a static layout, I set out to build an experience that users could feel and control, using animation, interaction, and motion to tell a story within seconds.
The goal was simple: to create a bold, high-impact hero section that instantly grabs attention. I wanted it to feel alive aggressive, sleek, and interactive much like the Dodge Demon itself. Rather than settling for a static layout, I set out to build an experience that users could feel and control, using animation, interaction, and motion to tell a story within seconds.
Gathering Assets
Gathering Assets
Gathering Assets
Before I started building, I spent time sourcing high-quality 3D assets that could work for my concept and what I was aiming for. My focus was on finding a car model that balanced realism with performance.
I explored platforms like CGTrader and Sketchfab, testing out a few different models to see how they’d behave in Spline. Ultimately, I chose a Sketchfab model that had the perfect level of detail without being too heavy. It became the core visual anchor of the hero section, and I discarded the rest to keep the experience smooth and focused.
Before I started building, I spent time sourcing high-quality 3D assets that could work for my concept and what I was aiming for. My focus was on finding a car model that balanced realism with performance.
I explored platforms like CGTrader and Sketchfab, testing out a few different models to see how they’d behave in Spline. Ultimately, I chose a Sketchfab model that had the perfect level of detail without being too heavy. It became the core visual anchor of the hero section, and I discarded the rest to keep the experience smooth and focused.
unused model
unused model
unused model
unused model
final used model
final used model
tools used
tools used
tools used
The main tools used were Spline and Framer. Spline was used for all 3D modeling, animation, and interactivity, while Framer served as the foundation for layout, transitions, and building the full website experience.
In addition, I used Blender, Inkscape, and Photoshop at different points for experimentation testing lighting setups, adjusting textures, and exploring visual ideas before finalizing them in Spline.
The main tools used were Spline and Framer. Spline was used for all 3D modeling, animation, and interactivity, while Framer served as the foundation for layout, transitions, and building the full website experience.
In addition, I used Blender, Inkscape, and Photoshop at different points for experimentation testing lighting setups, adjusting textures, and exploring visual ideas before finalizing them in Spline.
PROBLEMS FACED
PROBLEMS FACED
PROBLEMS FACED
3d model format compatibility
3d model format compatibility
3d model format compatibility
Finding the right format for the 3D model was a trial-and-error process. Not all files imported cleanly into Spline, and some had missing textures or broke the scene layout.
Finding the right format for the 3D model was a trial-and-error process. Not all files imported cleanly into Spline, and some had missing textures or broke the scene layout.
limited interactivity in spline
limited interactivity in spline
limited interactivity in spline
Spline’s built-in camera controls are fairly basic, which made it difficult to create a smooth, user-controlled interactive experience. Workarounds were required to simulate the level of control I wanted.
Spline’s built-in camera controls are fairly basic, which made it difficult to create a smooth, user-controlled interactive experience. Workarounds were required to simulate the level of control I wanted.
Performance and Load Time
Performance and Load Time
Performance and Load Time
Managing performance was an ongoing concern. With a visually heavy 3D scene, maintaining fast load times and a stable frame rate took a lot of fine-tuning, especially for web.
Managing performance was an ongoing concern. With a visually heavy 3D scene, maintaining fast load times and a stable frame rate took a lot of fine-tuning, especially for web.
broken model
broken model
heavy textures, choppy scenes
heavy textures,
choppy scenes
heavy textures,
choppy scenes
solutions
solutions
solutions
Use FBX for More Control
Use FBX for More Control
Use FBX for More Control
After testing multiple formats, FBX proved to be the most reliable. Unlike GLB or GLTF, FBX imports without pre-attached materials or textures, giving full control over material assignment, optimization, and visual consistency.
After testing multiple formats, FBX proved to be the most reliable. Unlike GLB or GLTF, FBX imports without pre-attached materials or textures, giving full control over material assignment, optimization, and visual consistency.
Merge Objects & Minimize Materials
Merge Objects & Minimize Materials
Merge Objects & Minimize Materials
Reducing draw calls was essential. Merging multiple parts of the 3D model into a single mesh significantly improved performance. I also limited the number of materials used in the scene, which streamlined rendering and boosted load times, know that taking this to extremes can worsen performance becasuse too much merging can add complexity.
Reducing draw calls was essential. Merging multiple parts of the 3D model into a single mesh significantly improved performance. I also limited the number of materials used in the scene, which streamlined rendering and boosted load times, know that taking this to extremes can worsen performance becasuse too much merging can add complexity.
Performance and Load Time
Performance and Load Time
Performance and Load Time
While Spline allows for camera use, animating them directly can be clunky. Instead, grouping background and primary elements with the main object created a smooth, pseudo-camera effect better suited for seamless transitions and interactivity.
While Spline allows for camera use, animating them directly can be clunky. Instead, grouping background and primary elements with the main object created a smooth, pseudo-camera effect better suited for seamless transitions and interactivity.
Keep Lighting Simple
Keep Lighting Simple
Keep Lighting Simple
Overcomplicating lighting in Spline can easily impact performance. I used a single directional light and relied on material reflectivity and shadows from the matcap layer to create depth without extra overhead.
Overcomplicating lighting in Spline can easily impact performance. I used a single directional light and relied on material reflectivity and shadows from the matcap layer to create depth without extra overhead.
optimizations
optimizations
optimizations
To ensure the hero section loaded smoothly and performed well on the web, several optimization techniques were applied. These included reducing file sizes, simplifying materials, and streamlining animations. While the design leaned heavily on 3D visuals, careful choices helped maintain fast load times and stable performance across devices, especially on mobile. A comparison of performance is shown below
To ensure the hero section loaded smoothly and performed well on the web, several optimization techniques were applied. These included reducing file sizes, simplifying materials, and streamlining animations. While the design leaned heavily on 3D visuals, careful choices helped maintain fast load times and stable performance across devices, especially on mobile. A comparison of performance is shown below
before optimizations
before optimizations
before optimizations
score 15/100
score 15/100
score 15/100
after optimizations
after optimizations
after optimizations
score 99/100
score 99/100
score 99/100
design considerations
design considerations
design considerations
The layout of the hero section went through multiple iterations, especially around the interactive panel placement and the 3D background. I tested various positions for the button panel to balance usability with aesthetics, ensuring it felt integrated without distracting from the scene. Lighting and background composition also played a big role, subtle shifts in intensity, color, and angle were tested to find a look that enhanced the car model while preserving readability and focus.
The layout of the hero section went through multiple iterations, especially around the interactive panel placement and the 3D background. I tested various positions for the button panel to balance usability with aesthetics, ensuring it felt integrated without distracting from the scene. Lighting and background composition also played a big role, subtle shifts in intensity, color, and angle were tested to find a look that enhanced the car model while preserving readability and focus.
final thoughts
final thoughts
final thoughts
This project solidified my approach to integrating high-detail 3D models into web environments. The process of importing, refining, and optimizing complex scenes is now much more streamlined in my workflow. With a clear understanding of format limitations, performance bottlenecks, and interaction design, I’m able to make informed decisions that balance visual impact with technical efficiency.
This project solidified my approach to integrating high-detail 3D models into web environments. The process of importing, refining, and optimizing complex scenes is now much more streamlined in my workflow. With a clear understanding of format limitations, performance bottlenecks, and interaction design, I’m able to make informed decisions that balance visual impact with technical efficiency.
With a refined workflow in place, I'm ready to deliver immersive 3D web experiences with precision and speed.
With a refined workflow in place, I'm ready to deliver immersive 3D web experiences with precision and speed.
The road wasn’t smooth — but neither is the Demon.
The road wasn’t smooth — but neither is the Demon.
The road wasn’t smooth — but neither is the Demon.
test it drag the Demon below
test it drag the Demon below
test it drag the Demon below
Contact me
Contact me
If you have any questions or want to know more about me feel free to contact me below.
If you have any questions or want to know more about me feel free to contact me below.
Designed and Developed by M Sarim Khan
© 2025 All rights reserved.
© 2025 M Sarim Khan. All rights reserved.