I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Yes — that makes perfect sense. You're describing a scroll-reveal effect within a fixed “viewport” shape (a black circle) inside a full-height row in Salient. The text will appear inside the circle as you scroll, but it won't extend beyond the circle or its container. It's a slick, “magic lens” effect.
✅ Here's what you're aiming for:
A full-height row (100vh) in Salient
A black circular background centered on the screen
Scroll-triggered text animation, but only visible when inside the circle
No long scroll — just enough motion to create the effect
🛠️ How to Build This in Salient (WordPress)
1. Create a Full-Height Row
Use Salient WPBakery Page Builder
Add a new Row
In Row settings → Height = Full Height
Set Positioning = Relative
2. Add a Column with a Circle Container
Inside the Row:
Add a single column
In that column, add a Div / Container (HTML block or Salient Fancy Box)
Apply these custom classes:
css
Copy
Edit
.circle-reveal {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background: #000;
overflow: hidden;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
3. Add the Scroll-Reveal Text (Inside the Circle)
Use a Text Block inside .circle-reveal and assign a class like reveal-text:
css
Copy
Edit
.reveal-text {
color: #00D084;
font-size: 32px;
text-align: center;
opacity: 0;
transform: translateY(60px);
transition: all 0.6s ease-out;
}
Then use Scroll Trigger JS to animate it when in view.
4. Add Intersection Observer or Salient Scroll Animation
If using Salient's built-in animation:
In the text block's animation settings, choose Fade In Up
Set animation trigger offset to center or 60%
Ensure it animates only once
If you're adding custom JS:
Yes — that makes perfect sense. You're describing a scroll-reveal effect within a fixed “viewport” shape (a black circle) inside a full-height row in Salient. The text will appear inside the circle as you scroll, but it won't extend beyond the circle or its container. It's a slick, “magic lens” effect.
✅ Here's what you're aiming for:
A full-height row (100vh) in Salient
A black circular background centered on the screen
Scroll-triggered text animation, but only visible when inside the circle
No long scroll — just enough motion to create the effect
🛠️ How to Build This in Salient (WordPress)
1. Create a Full-Height Row
Use Salient WPBakery Page Builder
Add a new Row
In Row settings → Height = Full Height
Set Positioning = Relative
2. Add a Column with a Circle Container
Inside the Row:
Add a single column
In that column, add a Div / Container (HTML block or Salient Fancy Box)
Apply these custom classes:
css
Copy
Edit
.circle-reveal {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background: #000;
overflow: hidden;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
3. Add the Scroll-Reveal Text (Inside the Circle)
Use a Text Block inside .circle-reveal and assign a class like reveal-text:
css
Copy
Edit
.reveal-text {
color: #00D084;
font-size: 32px;
text-align: center;
opacity: 0;
transform: translateY(60px);
transition: all 0.6s ease-out;
}
Then use Scroll Trigger JS to animate it when in view.
4. Add Intersection Observer or Salient Scroll Animation
If using Salient's built-in animation:
In the text block's animation settings, choose Fade In Up
Set animation trigger offset to center or 60%
Ensure it animates only once
If you're adding custom JS:
Neon Grove
What we did
Industry
Tech
Description
I collaborated with Neon Grove, an emerging force in the tech sector, to create a dynamic series of photographs. The work focused on showcasing their innovative products and sleek designs, capturing the essence of their technological vision through sharp, modern imagery.