# I want this shapeless infinity mouse drag card gllary effect with each card should be title and desc, see on the attached link i want like this hover with text https://www.barlow.agency/

**URL:** <https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747>\
**Category:** Questions\
**Tags:** loaders, textures, animation, geometry\
**Created:** [November 4, 2023, 3:00am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747 "2023-11-04T03:00:52Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 4, 2023, 3:00am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/1 "2023-11-04T03:00:52Z")

</div>

I want this shapeless infinity scroll like this site [https://www.barlow.agency/](https://www.barlow.agency/) using three.js canva. anyone pleas help me! I have done the dragging and seamless looping but i want to add every card should be a title and by hover card that title should be show

here is my my code i want here every card with tile.i already implemented the semmlesly looping by direction dragging but when i am trying to add custom card / adding title that time i can’t .pleas helped me, also see the reference site there have title description every card i want it

this is my code

 Centered Three.js Continuous Looping Image Gallery body { margin: 0; overflow: hidden; } #gallery-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

 function createContinuousLoopingGallery(targetDiv) { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); targetDiv.appendChild(renderer.domElement);

```
    renderer.setClearColor(0xffffff);

    const images = [];
    const basePath = "./assets/images/case-study/";
    const totalImages = 20;
    const numCols = 4;
    const numRows = 3;
    const imageSize = 769;
    const spacing = 16;
    const gridWidth = numCols * (imageSize + spacing) - spacing;
    const gridHeight = numRows * (imageSize + spacing) - spacing;

    for (let row = 0; row < numRows; row++) {
      for (let col = 0; col < numCols; col++) {
        const i = row * numCols + col + 1;
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load(`${basePath}${i}.jpg`);
        const material = new THREE.MeshBasicMaterial({ map: texture });
        const geometry = new THREE.PlaneGeometry(imageSize, imageSize);

        const imageMesh = new THREE.Mesh(geometry, material);
        const x = col * (imageSize + spacing) - gridWidth / 2;
        let y = gridHeight / 2 - row * (imageSize + spacing) - gridHeight / 2;

        // Adjust the y-position for every second card in each row
        if (col % 2 === 1) {
          y += 264;
        }

        imageMesh.position.set(x, y, -5);
        scene.add(imageMesh);
        images.push(imageMesh);

        // Set initial rotation values
        imageMesh.rotation.x = 0;
        imageMesh.rotation.y = 0;
      }
    }

    // Set the camera's initial position to the center
    camera.position.set(0, 0, 600);

    let isDragging = false;
    let previousX = 0;
    let previousY = 0;

    document.addEventListener("pointerdown", (event) => {
      isDragging = true;
      previousX = event.clientX;
      previousY = event.clientY;
    });

    document.addEventListener("pointermove", (event) => {
      if (isDragging) {
        const deltaX = event.clientX - previousX;
        const deltaY = event.clientY - previousY;
        for (const image of images) {
          // Update the skew effect based on mouse movement
          const skewX = deltaX * 0.005;
          const skewY = -deltaY * 0.005;

          // Apply skew effect using GSAP animation
          gsap.to(image.rotation, {
            x: skewX,
            y: skewY,
            duration: 0.2,
          });

          image.position.x += deltaX;
          image.position.y -= deltaY;
        }
        previousX = event.clientX;
        previousY = event.clientY;
      }
    });

    document.addEventListener("pointerup", () => {
      isDragging = false;
    });

    const animate = () => {
      requestAnimationFrame(animate);

      // Loop the images when they go off-screen in both x and y axes
      for (const image of images) {
        if (image.position.x > gridWidth / 2) {
          image.position.x -= gridWidth + spacing;
        } else if (image.position.x < -gridWidth / 2) {
          image.position.x += gridWidth + spacing;
        }

        if (image.position.y > gridHeight / 2) {
          image.position.y -= gridHeight + spacing;
        } else if (image.position.y < -gridHeight / 2) {
          image.position.y += gridHeight + spacing;
        }
      }

      renderer.render(scene, camera);
    };

    animate();

    window.addEventListener("resize", () => {
      const newWidth = window.innerWidth;
      const newHeight = window.innerHeight;
      camera.aspect = newWidth / newHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(newWidth, newHeight);
    });
  }

  createContinuousLoopingGallery(document.getElementById("gallery-container"));
</script>

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 5, 2023, 9:26pm UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/2 "2023-11-05T21:26:39Z")

</div>

> [@Zakir\_Hosen](#):
>
> i can’t .pleas helped me

But which part specifically is causing problems? What’s blocking you?

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 6, 2023, 1:37am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/3 "2023-11-06T01:37:52Z")

</div>

i am blocked on the card over text title,description and a cta btn, i have make that shapeless infinity dragging all direction but i can’t take over the card title description btn etc, i need that point help. see in here[[https://www.barlow.agency/](https://www.barlow.agency/)] every card have title desc and btn i need this,

---

<div class="post-metadata">

**Author:** ![nameo9283](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nameo9283/32/42038_2.png) [@nameo9283](https://discourse.threejs.org/u/nameo9283)\
**Post date:** [November 20, 2023, 6:28am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/4 "2023-11-20T06:28:41Z")

</div>

well for one, its html not canvas or 3d. As for infinity. Its not. Its a trick, you need to understand the core concept. You can prototype it in pen and paper, or better yet rip up some paper and arrange cards and a mask viewing area and slide things around to get an idea how you can push and pop cards around. Once you get teh concept you can rebuild the logic in any tool

The other part is the magic of masks, preload content over content but have it masked out until needed

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 20, 2023, 6:32am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/5 "2023-11-20T06:32:36Z")

</div>

yes, you thought is right. and i know what i need ,i already menton a sample of site animation, i already achived the dragging but can’t takinf over the card text

---

<div class="post-metadata">

**Author:** ![nameo9283](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nameo9283/32/42038_2.png) [@nameo9283](https://discourse.threejs.org/u/nameo9283)\
**Post date:** [November 20, 2023, 6:43am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/6 "2023-11-20T06:43:53Z")

</div>

just make a small demo of the card text. Or you just trying to swap a 3d object? .visible ?

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 20, 2023, 8:21am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/7 "2023-11-20T08:21:21Z")

</div>

i want 3d object card , its like html element to 3d odject card over text

---

<div class="post-metadata">

**Author:** ![nameo9283](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nameo9283/32/42038_2.png) [@nameo9283](https://discourse.threejs.org/u/nameo9283)\
**Post date:** [November 20, 2023, 8:35am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/8 "2023-11-20T08:35:41Z")

</div>

we get that, but you have to try to make a small demo hosted on [glitch.com](http://glitch.com) or [jsfiddle.net](http://jsfiddle.net) or the like showing a basic work and issue you are having. Not the whole app, just some unit of the thing. Most all projects are just a series of small unit things  
A card is a plane with a texture  
Or a card is a plane with objects nested in it  
And shaders and masks  
etc

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 20, 2023, 8:41am UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/9 "2023-11-20T08:41:34Z")

</div>

yes see this i have done dragging for all directions but can’t take the hover over the text [https://codepen.io/ReGGae/pen/eYGyLrP](https://codepen.io/ReGGae/pen/eYGyLrP)

---

<div class="post-metadata">

**Author:** ![nameo9283](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nameo9283/32/42038_2.png) [@nameo9283](https://discourse.threejs.org/u/nameo9283)\
**Post date:** [November 20, 2023, 8:26pm UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/10 "2023-11-20T20:26:48Z")

</div>

I dont see any text in your example. Great work otherwise on the effect.  
Are you wanting raycasts over each card?

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 20, 2023, 8:30pm UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/11 "2023-11-20T20:30:36Z")

</div>

yes, for this only point i need help, i can’t take card over text , if you can pleas helpe

---

<div class="post-metadata">

**Author:** ![nameo9283](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nameo9283/32/42038_2.png) [@nameo9283](https://discourse.threejs.org/u/nameo9283)\
**Post date:** [November 20, 2023, 8:43pm UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/12 "2023-11-20T20:43:04Z")

</div>

[https://threejs.org/docs/#api/en/core/Raycaster](https://threejs.org/docs/#api/en/core/Raycaster)  
If Dom, its just addEvent(“pointerdown”) either on the element or at the root element and bubble down to the event.target element

> **[Introduction to events - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)**
>
> Events are things that happen in the system you are programming, which the system tells you about so your code can react to them.

otherwise you can do pointInPoly(point) but thats for non square shapes

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [November 20, 2023, 11:44pm UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/13 "2023-11-20T23:44:09Z")

</div>

Isn’t this the exact same question / topic as your other post? [How do I place 2D text over 3D card element? - #31 by Zakir\_Hosen](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/31)

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [April 11, 2025, 5:50pm UTC](https://discourse.threejs.org/t/i-want-this-shapeless-infinity-mouse-drag-card-gllary-effect-with-each-card-should-be-title-and-desc-see-on-the-attached-link-i-want-like-this-hover-with-text-https-www-barlow-agency/57747/14 "2025-04-11T17:50:48Z")

</div>

I have done similar grid here [Shader Grid](https://webdesign-flash.ro/p/sg/)